Блог

У меня есть панель навигации, которая прикреплена к верхней части страницы, когда ширина составляет менее 768 пикселей.

Когда она превышает 768 пикселей, она начинается снизу, а когда пользователь прокручивает ее, она застревает вверху.

Оба этих экземпляра отлично работают сами по себе, но при изменении размера браузера возникают некоторые проблемы при переходе с менее 768 пикселей на более высокие. (Переход от 768 к ниже работает нормально.)

Когда я загружаю страницу в браузере размером менее 768 пикселей, а затем изменяю размер окна выше, вот тут-то я и сталкиваюсь с проблемами.

Я бы хотел, чтобы панель навигации плавно переходила между состояниями. (Это прекрасно работает при загрузке выше 768 пикселей, затем сбрасывается до нижнего и сбрасывается выше — в идеале я бы хотел, чтобы это работало при загрузке ниже 768 пикселей.) Или в качестве альтернативы просто зафиксируйте панель навигации вверху при переходе из-под 768 пикселей выше.

Это ссылка на сайт.

Это мой 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>
  

попробуйте это:

 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()) amp;amp; (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();
});