P. Duarte P. Duarte - 2 months ago 5
CSS Question

Change class on ready and on scroll if it has enough width

I am developing a website and in the top i have a fixed menu and a slider (both from bootstrap).

My problem is that the menu text is white as the website background and the menu is transparent so i added one javascript function that changed the menu background when the slider arrived to the end of the slider.

jQuery("document").ready(function($){

var nav = $('.navbar');

$(window).scroll(function () {
if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
nav.addClass("navbar3");
nav.removeClass("navbar2");
} else {
nav.removeClass("navbar3");
nav.addClass("navbar2");
}
});
});


With this CSS

.navbar2 {
z-index: 99;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
border-radius: 0px;
background-color: rgba(255, 0, 0, 0);
}

.navbar3 {
z-index: 99;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
border-radius: 0px;
background-color: rgba(237, 125, 49, 0.5);
}


(The default class was navbar2)

No problem until here.

Now, as I was testing the website in different resolutions I found out that when the viewport is less than 453 pixels (and the bootstrap menu had already changed the menu for a dropdown menu) the dropdown finishes already under the slider, so it is impossible to see the last elements what I tried to do:


  1. change the default class to navbar3

  2. add one if so that the class only changed if the viewport was bigger than 453px (the menu backgroung would never be transparent if less than 453px).



But it was a failure because it was only like that if i kept reloading the page while changing resolutions, so one more time i changed it so it could change on resize too:

jQuery("document").ready(function($){

var nav = $('.navbar');

function addnav3() {
nav.addClass("navbar3");
nav.removeClass("navbar2");
}
function addnav2() {
nav.addClass("navbar2");
nav.removeClass("navbar3");
}

if ($(window).width() > 453) {
addnav2();
$(window).scroll(function () {
if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
addnav3();
}
else {
addnav2();
}
});
}


$(window).resize(function () {
if ($(window).width() > 453) {
addnav2();
$(window).scroll(function () {
if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
addnav3();
}
else {
addnav2();
}
});
}
else {
addnav3();
}
});
});


And now it really changes while i resize but if i go to the end of the slider and come back up the menu backgroung disappear...

I'm not very experient with javascript so any ideas? I'll post all the HTML here.

<nav class="navbar navbar3" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img id="logo" alt="Brand" src="<?php echo $imagesfolder; ?>Untitled-1.png">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Sobre Nós</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="" id="slider">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo $imagesfolder; ?>transferir.jpg" alt="" width="460" height="345">
</div>

<div class="item">
<img src="<?php echo $imagesfolder; ?>transferir%20(1).jpg" alt="" width="460" height="345">
</div>

<div class="item">
<img src="<?php echo $imagesfolder; ?>transferir%20(2).jpg" alt="" width="460" height="345">
</div>

<div class="item">
<img src="<?php echo $imagesfolder; ?>images.jpg" alt="" width="460" height="345">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>


Thank you in advance, MDC

Answer

I put it working by changing the javascript, unbinding the event listeners:

jQuery("document").ready(function($){

var nav = $('.navbar');

function addnav3() {
    nav.addClass("navbar3");
    nav.removeClass("navbar2");
}
 function addnav2() {
    nav.addClass("navbar2");
    nav.removeClass("navbar3");
}

    if ($(window).width() > 453) {
        addnav2();
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }
    else {
        $(this).unbind('scroll');
        addnav3();
    }


$(window).resize(function () {
    addnav2();
    if ($(window).width() > 453) {
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }
    else {
        $(this).unbind('scroll');
        addnav3();
    }
});
      });
Comments