jquery sticky header with resize

Я создаю липкий навигатор, который будет расположен в нижней части окна просмотра при запуске. Я использую vh единиц, чтобы разместить его. Теперь, если высота видового экрана изменится, навигационные привязки по назначению. Однако .offset().top будет продолжать использовать устаревшее положение. Это приводит к тому, что скрипт переключается на липкие позиции.jquery sticky header with resize

var win = $(window), 
 
    header = $('nav'), 
 
    offset = (header.offset().top); 
 

 
win.scroll(function() { 
 
    if (offset < win.scrollTop()) { 
 
    header.addClass("sticky"); 
 
    } else { 
 
    header.removeClass("sticky"); 
 
    } 
 
});

#container { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#boxi { 
 
    z-index: -15; 
 
    height: 50vh; 
 
    background-color: green; 
 
} 
 
#boxi2 { 
 
    z-index: -15; 
 
    height: 1000px; 
 
    background-color: pink; 
 
} 
 
nav { 
 
    width: 100%; 
 
    position: absolute; 
 
    height: 50px; 
 
    top: 50vh; 
 
    transform: translate(0, -50px); 
 
    background-color: black; 
 
    opacity: 0.5; 
 
    color: white; 
 
} 
 
nav.sticky { 
 
    transform: translate(0, 0px); 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body id="container"> 
 
    <div id="boxi"></div> 
 
    <nav>Sticky!</nav> 
 
    <div id="boxi2"></div> 
 
</body>

JSFiddle

источник

2017-02-13 Philip Cee

https://jsfiddle.net/4whfz14j/6/ -> это вы хотите достичь? –

Да, отлично, спасибо, все ответы работают, но я говорю, что я не должен просто сказать «спасибо»! В любом случае каждое решение отлично работает! –

Что происходит, что ваше смещение не обновляются после вашего размера окна. Таким образом, addClass/removeClass будет запускаться после прокрутки предыдущей точки. К счастью, вы можете просто добавить следующее в конце кода, чтобы получить, что исправлено:

win.on('resize',function(){ 
    offset = (header.offset().top); 
});

Это гарантирует, что ваше смещение будет обновляться каждый раз, ваше окно изменяет размер, таким образом, сохраняя вещи в синхронизации.

JS Fiddle

источник

2017-02-13 21:19:30 Yeasayer

использовать окно .resize функцию Jquery. он активирует изменение размера цели.

var win = $(window), 
 
    header = $('nav'), 
 
    offset = (header.offset().top); 
 

 
win.scroll(function() { 
 
    if (offset < win.scrollTop()) { 
 
     header.addClass("sticky"); 
 
    } else { 
 
     header.removeClass("sticky"); 
 
    } 
 
}), 
 

 
win.resize(function() { 
 
\t \t offset = header.offset().top; 
 
})

#container{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#boxi { 
 
    z-index: -15; 
 
    height:50vh; 
 
    background-color:green; 
 
} 
 

 
#boxi2{ 
 
    z-index: -15; 
 
    height:1000px; 
 
    background-color:pink; 
 
} 
 

 
nav { 
 
    width:100%; 
 
    position:absolute; 
 
    height:50px; 
 
    top:50vh; 
 
    transform: translate(0,-50px); 
 
    background-color:black; 
 
    opacity:0.5; 
 
    color:white; 
 
} 
 

 
nav.sticky { 
 
    transform: translate(0, 0px); 
 
    position:fixed; 
 
    top:0px; 
 
    right:0px; 
 
    left:0px; 
 
    z-index:999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body id="container"> 
 
    <div id="boxi"></div> 
 
    <nav>Sticky!</nav> 
 
    <div id="boxi2"></div> 
 
</body>

источник

2017-02-13 21:31:53

jquery sticky header with resize

ответ

Смежные вопросы