Question

我已经开始尝试使用javascript / jquery并且遇到了我的第一个障碍。一切都有效但是那样。当你向下滚动它时，我有一个导航栏固定在页面顶部，它有一个隐藏的图像。当导航栏击中顶部时，我试图使其可见并淡入，当您向后滚动时，我会淡出。我尝试过使用多种解决方案，但似乎没有任何效果。我很确定问题是我写这篇文章失败了所以任何人都可以发光吗？

CSS：

#navimg { 
    padding: 0px 0px 0px 0px; 
    margin: 0px;
    height: 45px;
    visibility: hidden; 
}

使用Javascript：

$(function() {
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; 
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); 

            if (scroll_top > sticky_navigation_offset_top) { 
                $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
            } else {
                $('#sticky_navigation').css({ 'position': 'relative' }); 
            }   
    };

    sticky_navigation(); 
    $(window).scroll(function() { // 
         sticky_navigation();
    });
});


$(window).scroll(function(){
    if($(window).scrollTop()<200){
        $('#navimg').css({ 'visibility': 'visible' }); 
    } else {
        $('#navimg').css({ 'visibility': 'hidden' });
    } 
});

Answer 1

向下滚动时我做了什么（导航栏固定顶部），我切换css类：

$(window).scroll(function () {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

向下滚动一定数量的像素后，如何显示隐藏的图像？

1 个答案: