CSS / JS在页面滚动到某个点时将class添加到div

Question

I'm looking for a way to add a class to a div when the page is scrolled to a certain point.

The important parts of my CSS:

.top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 6.5vh;
}

.top-bar-bg {
    background: -moz-linear-gradient(0deg,#6272e9,#36104a);  
}

I've tried adding the class ( top-bar-bg ) using

window.addEventListener("scroll", function(event){
var scroll = this.scrollY;
if(scroll > 860) {
   this.document.getElementById("nav").classList.add("top-bar-bg");
} else {
   this.document.getElementById("nav").classList.remove("top-bar-bg");
}
});

to then notice that when I zoom in or out, scrollY will be different values so the class is added to early/late.

I've also tried doing this way only to realize that it gives me the same issue.

Am I missing something (obvious)? Or is this not the right way to do it? If you know how to do it, please tell me.

Answer 1

I've simplified the code and totally revamped it.

$(function(){
    var btn = $('.button');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= btnPosTop){
            //we've reached the button
            btn.css({position:'fixed',top:0,marginTop:0});
        }else if(btn.css('position') === 'fixed'){
            //if we scroll back up past the button's original position, and the button had previously been changed to its fixed position, we change it back
            btn.css({position:'',top:'',marginTop:'100px'});
        }
    });
});

Anyway, you should put the code for making the text appear inside of the if(scrollTop >= btnPosTop) statement. Just like the button, it should get a position of fixed (either by setting it in JS or by adding a class to the containing div that has its CSS specified as having position:fixed ) so that it moves along as the page scrolls.

Fiddle: JSFiddle Example

Answer 2

is this what you were looking for?

 $(document).ready(function() { $(window).scroll(function(){ if ($(this).scrollTop() > 10) { $('.box').addClass('box-hover'); } else { $('.box').removeClass('box-hover'); } }); });

 .box { color: red; }.box:hover { color: orange }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box">1</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <!-- After scroll down add class box-hover--> <div class="box box-hover">1</div>