Question

当宽度低于768像素时，我有一个导航栏固定在页面顶部。

当它超过768px时，它从底部开始，当用户滚过它时，它会卡在顶部。

这两个实例都可以自行运行，但是当调整浏览器大小时，从768px到768px以上会有一些问题。（从768到下面工作正常。）

当我以768px以下的浏览器大小加载页面时，然后调整上面的窗口大小，这是我遇到问题的地方。

我希望导航栏能够在州之间平滑过渡。（当装载到768px以上，然后重新振作到下面并在上面重新调整时，它工作得很漂亮 - 理想情况下，这是我希望它在768px以下加载时的工作方式。）或者作为替代方案，只需将导航条固定在顶部，当从下方移动时768px以上。

This is the link to the site.

这是我的CSS

.header{
width: 100%;
min-width: 300px;
height: 100px;
padding: 0px;
background: black;
position: absolute;
bottom: 0px;
z-index: 99999;
-webkit-font-smoothing: subpixel-antialiased;
}

.header.fixed{
width: 100%;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}

@media only screen and (max-width: 768px){
.header{
width: 100%;
background: black;
position: fixed;
top: 0px;
height: 100px;
-webkit-font-smoothing: subpixel-antialiased;
}
}

这是Javascript

<script>  

jQuery(document).ready(function() {
    var s = jQuery(".header");
    var pos = s.position();                    
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("fixed");
        } else {
            s.removeClass("fixed"); 
        }
    });
});
</script>

我也尝试过以下没有运气。

<script>  
if ( jQuery(window).width() > 768) {       
jQuery(document).ready(function() {
    var s = jQuery(".header");
    var pos = s.position();                    
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("fixed");
        } else {
            s.removeClass("fixed"); 
        }
    });
});
}</script>

<script>  
jQuery(window).resize(function(){
if ( jQuery(window).width() > 768) {       
jQuery(document).ready(function() {
    var s = jQuery(".header");
    var pos = s.position();                    
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("fixed");
        } else {
            s.removeClass("fixed"); 
        }
    });
});
}})</script>

Answer 1

试试这个：

function sticky_navigation() {
    var browserWidth = $(window).width();
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the page, change its position to fixed to stick to top,
    // otherwise change it back to relative
    if ((scroll_top > $('.header').height()) && (browserWidth > 720)) { 
        $('.header').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' });
    } else {
        $('.header').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' }); 
    }   
};

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
});

// and run every time you resize to boot
$(window).resize(function() {
     sticky_navigation();
});

响应和粘性导航栏

1 个答案: