페이지가 400px 스크롤 될 때 #headermenu가 고정되도록이 설정이 있습니다. 그러나이 div 위의 div는 화면 크기에 따라 가변 높이를 갖습니다.
위의 div 하단 (#mixedheightheader)이 창 상단에 도달했을 때 #headermenu를 수정하려면 JS가 필요합니다.
도움을 주셔서 미리 감사드립니다.
<div id="mixedheightheader"></div>
$(function() {
$('#headermenu');
});
$(window).scroll(function() {
if ($(document).scrollTop() < 400) {
if ($('#headermenu')) {
$('#headermenu');
$('#headermenu').stop().css({
top: '0',
position: 'relative'
});
}
}
else {
if ($('#headermenu')) {
$('#headermenu');
$('#headermenu').stop().css({
top: '0',
position: 'fixed'
});
}
}
});body {
height: 3000px
}
#headermenu {
width: 100%;
background: black;
min-height: 100px;
}
#mixedheightheader {
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
min-height: 200px;
overflow: hidden;
background: grey;
clear: both;
}
#below {
width: 100%;
background: darkgrey;
height: 100px;
position: relative;
z-index: -1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mixedheightheader"></div>
<div id="headermenu"></div>
<div id="below"></div>나는 당신에게 바이올린을 업데이트했습니다.
https://jsfiddle.net/yLon2oj3/11/
$(function() {
var isFixed = false; //This is to not fix if already fixed and reverse
$(window).scroll(function() {
var mixedHeightHeader = $('#mixedheightheader');
//This uses the offset top position and the height to calculate the bottom of your variable header
var mixedHeightHeaderBottom = mixedHeightHeader.offset().top + mixedHeightHeader.height();
var headerMenu = $('#headermenu');
if ($(document).scrollTop() < mixedHeightHeaderBottom && isFixed) {
if (headerMenu) {
headerMenu.css({
top: '0',
position: 'relative'
});
isFixed = false;
//this is to remove the placeholder space of the fixed top nav, when its not fixed to top
mixedHeightHeader.css('margin-bottom', '0');
}
}
else if ($(document).scrollTop() > mixedHeightHeaderBottom && !isFixed) {
if (headerMenu) {
headerMenu.css({
top: '0',
position: 'fixed'
});
//This holds the position that was occupied by the fixed top nav when it was a relative element, because its now taken out of the flow.
mixedHeightHeader.css('margin-bottom', headerMenu.height() + 'px');
}
isFixed = true;
}
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다