Remove transparency on menu drop down Javascript

Bootstrap Studio Help
1

Hi!

I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.

The code I am currently using, which removes transparency on scroll but not on drop down is:

$(document).ready(function(){
    var stoptransparency = 100; // when to stop the transparent menu
    var lastScrollTop = 0, delta = 5;
    $(this).scrollTop(0);
    $(window).on('scroll load resize', function() {
        var position = $(this).scrollTop();
        if(position > stoptransparency) {
            $('#transmenu').removeClass('transparency');
        } else {
            $('#transmenu').addClass('transparency');
        }

        lastScrollTop = position;  
    });

    $('#transmenu .dropdown').on('show.bs.dropdown', function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
    });

    $('#transmenu .dropdown').on('hide.bs.dropdown', function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
    });
});

I tried changing it to this (and variations of this) but can't seem to get it to work:

$(document).ready(function(){
            var stoptransparency = 100; // when to stop the transparent menu
            var lastScrollTop = 0, delta = 5;
            $(this).scrollTop(0);
            $(window).on('scroll load resize', function() {
                var position = $(this).scrollTop();
                if(position > stoptransparency) {
                    $('#transmenu').removeClass('transparency');
                } else {
                    $('#transmenu').addClass('transparency');
                }

                lastScrollTop = position;  
            });

            $('#transmenu .dropdown').on('show.bs.dropdown', function() {
                $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
            });

            $('#transmenu .dropdown').on('hide.bs.dropdown', function() {
                $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
            });
        });

Any help would be greatly appreciated!

Thanks!

2

Since I don't know how you actually have your HTML and CSS coded, can't view a working site. I created a new BSS 4 project.

Added Navbar Added Dropdown to end of Navbar Added Jumbotron x3 Gave ID's to Jumbotrons Opened Dropdown Edited Link URLs to Jumbotron IDs Gave Jumbotron CSS height property to be very tall for scrolling Added your second JS code to project Gave Navbar the ID transmenu Set Navbar to Fixed Top Added 56px of padding-top to Body Previewed site

Using Chrome's Developer Tools (F12)

Upon loading site the class transparency gets applied to the navbar. Clicking on the second or third dropdown links or scrolling the page, causes the class transparency to be removed. According to your JS code that is all appearing to behave as coded. And when clicking on the first or scrolling all the way up, class transparency gets re-added. However for the first Link to work correctly I had to remove the ID for the first jumbotron and apply it to the Body element so that I would end up all the way at the top of the page rather than stop at the top of the jumbotron which is not all the way at the top of the whole site so the transparency class would be applied again.

In BSS I now set the Dropdown to Closed. When I click the Dropdown menu the class gets removed, when I click it again the class gets re-applied. Click a link and it scrolls, class applies or not based on dropdown link.

This all seems to be working correctly for me in my tests based on what you have coded in your JS code.

This is what I used for CSS on my test based on the setup above.

body {
  padding-top:56px;
}

.jumbotron {
  height:100vh;
}

.navbar {
  background-color:red;
}

.transparency {
  background-color:transparent;
}

I'm not sure what you are having an issue with, as the class seems to be coming and going based on your JS code correctly.

If there is anything, it's when you've scrolled and click the dropdown twice, you lose the no transparent background when over sections I'm sure you want the background to not be transparent. I'd remove that part. If you've scrolled you already have a no transparent background, no need to apply anything when you click the dropdown.

I'd probably reverse when a class is added and removed since in my test the Navbar by default has no background so when scrolled I'd add a class that then adds a background.

Saj

3

I now realize you were talking about the dropdown menus subnav background. I'll recheck here in a bit.

Saj

4

Not matter what/which area, my first post appears to still be correct, just the CSS is applied differently.

Probably need a better explanation of what your expecting it to do and what it's is and is not doing.

When you load the page, class transparency is added. When you scroll the page class transparency is removed. When you click the dropdown the class is removed when you click a second time the class is re-added. That's how your JS is coded.

I guess I'm not exactly sure what are wanting it to do. I'd have to guess that your CSS is probably whats causing you to not see it work when clicking the dropdown.

Saj

5

Hi Saj,

Thank you for your help and I apologize for being unclear!

What I am trying to do is remove the transparency of the dropdown menu on mobile devices when someone clicks on the hamburger symbol. If you look at my website: portrayalmarketing.com on a mobile device and click on the hamburger icon before scrolling down you'll see that the menu items overlap with the hero text. That is what I am trying to prevent by remove the transparency.

I hope this clears things up.

Thanks again!

6

This css seems to be effecting it in the navbar.css if it helps....

#transmenu.transparency { background:transparent !important; box-shadow:none; border-color:transparent !important; font-size:18px; }

7

Hi Twinstream,

Thank you for your reply. That is indeed the class that is adding the transparency to the menu. The issue is removing this class when someone clicks the hamburger icon on a mobile device when the class is not already removed due to scrolling distance... If you have any suggestions I would love to hear them.

Thanks again!

8

Just seems like you need a click function for the menu to test for "show" on the navbar-collapse and then use add class remove class "transparency" based on the test. At work right now...so no time to experiement.

9

The following update to your JS code seems to get you what you want. Initially I tried using your JS code and when I got to the end there was enough of a visual glitch that I decided to start over using my own code thinking so I can wrap my head around everything better. So it's somewhat like yours in position testing but I just had to think it through my own way :)

$(function(){
    $(window).on('load', function() { // set attribute for later testing against
        $(".navbar-toggler").attr("aria-expanded", "false");
    });

    var topPos = 0;
    $(window).on('scroll load resize', function() {
        var curPos = $(this).scrollTop();
        if (curPos == topPos) {
            // if menu is at top and if opened or closed
            // toggle transparency class
            $("#transmenu").on('click', ".navbar-toggler", function() {
                if ($(".navbar-toggler").attr("aria-expanded") == "true") {
                    $('#transmenu').addClass('transparency');
                } else {
                    $('#transmenu').removeClass('transparency');
                }
            });
            $('#transmenu').addClass('transparency');
        } else if (curPos > topPos) {
            // effectively disengage the onclick
            // in the above position check
            $('#transmenu').off().removeClass('transparency');
        } else {
            // if you don't know
            // better to not look ugly
            $('#transmenu').removeClass('transparency');
        }
        // if menu is open when scrolling
        // close it
        if ($(".navbar-toggler").attr("aria-expanded") == "true") {
            $(".navbar-toggler").trigger('click');
        }
    });
});

Go ahead and just use it to see if it's what you want, you can always take from it what you need to work in yours but it seems to be how you were asking.

The problem with the CSS as @twinstream pointed out was that you also have to detect the distance of the scroll to know if you needed to add/remove the class. Which is probably easier to do now that I've worked out this JS code which has taken quite a bit of time. But this code also does little more than asked :)

Saj

P.S. I just drastically reduced the code :)

10

Looks like you got my JS code on the site now. Seems to be working well :)

Is that how you wanted it to work?

Saj

11

Great bit of code and looks great Saj. Well done....

12

@Saj,

I've implemented the code yesterday and tested it across multiple devices today. It works exactly how I wanted it to! Thank you for all your help! You too for thinking along, @Twinstream :)