如何将粘性菜单包含在浮动侧边栏中?
How to keep a sticky menu contained inside a floating sidebar?
我制作了这个 jsfiddle:https://jsfiddle.net/0yd516er/ 它说明了大部分问题。
如果菜单在浮动块中,如何阻止粘性菜单离开它所在的包装器?为此,我尝试了各种 js 插件,但我想那些只能与不浮动的相对 div 一起使用。包装器使用 overflow: hidden; 包裹浮动 div ;
.item 的高度未知。
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div class="header"></div>
<div class="wrap">
<div class="content">
<div class="item">Height of these elements isn't known</div>
<div class="item">Test test</div>
<div class="item">Test test</div>
<div class="item">Test test</div>
</div>
<div class="sidebar">
<div class="menu">
<div class="menu-top">Top of the menu should stay here</div>
<div class="menu-bottom">This part of the menu needs to be sticky, but stop at the end of .wrap</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
JS:
$(document).ready(function(){
// to set the width right even when position is fixed
var divWidth = $('.sidebar').width();
$('.menu-bottom').css('width', divWidth+'px');
var fixmeTop2 = $('.menu-bottom').offset().top;
$(window).scroll(function() {
var currentScroll2 = $(window).scrollTop();
if (currentScroll2 >= fixmeTop2) {
$('.menu-bottom').css({
position: 'fixed',
top: '20px'
});
} else {
$('.menu-bottom').css({
position: 'relative'
});
}
});
});
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
}
.wrap, .footer, .header {
position: relative;
width: 75%;
margin: auto;
overflow: hidden;
background-color: #EBEBEB;
}
.footer, .header {
height: 200px;
background-color: #999;
}
.footer {
height: 2000px;
}
.content {
float: left;
position: relative;
width: 70%;
}
.sidebar {
float: left;
position: relative;
width: 30%;
background-color: #0CF;
}
.item {
height: 300px;
position: relative;
width: 100%;
background-color: #0F6;
margin-bottom: 20px;
box-sizing: border-box;
padding: 20px;
}
.menu-top {
height: 120px;
box-sizing: border-box;
padding: 20px;
}
.menu-bottom {
z-index: 99;
position: relative;
height: 300px;
background-color: red;
box-sizing: border-box;
padding: 20px;
}
做了一些优化,切换了一个额外的 sticky
class。在带有 smoothscroll 和各种 padding-margin 的 Firefox 上进行检查,似乎对确切位置做出了响应:
.sticky {
position: fixed;
}
$(function() {
var wrap = $('.wrap'),
lowmenu = $('.menu-bottom'),
range = $('.sidebar').width(),
fromtop = 60,
edge = parseInt($('.item:last').css('margin-bottom'));
lowmenu.css('width', range);
var fixtop = lowmenu.offset().top-fromtop,
lowpoint = wrap.offset().top+wrap.outerHeight()-lowmenu.outerHeight()-edge-fromtop,
placetop = wrap.outerHeight()-lowmenu.outerHeight()-$('.menu-top').outerHeight()-edge;
$(window).scroll(function() {
var current = $(window).scrollTop();
if (current >= fixtop && current <= lowpoint && !stuck()) lowmenu.addClass('sticky').css('top', fromtop);
else if (current > lowpoint && stuck()) lowmenu.removeClass('sticky').css('top', placetop);
else if (current < fixtop && stuck()) lowmenu.removeClass('sticky').css('top', 0);;
});
function stuck() {
return lowmenu.hasClass('sticky');
}
});
您可以将 fromtop
设置为任意数字。最后一个 .item
的保证金也应该计算在内...
我制作了这个 jsfiddle:https://jsfiddle.net/0yd516er/ 它说明了大部分问题。
如果菜单在浮动块中,如何阻止粘性菜单离开它所在的包装器?为此,我尝试了各种 js 插件,但我想那些只能与不浮动的相对 div 一起使用。包装器使用 overflow: hidden; 包裹浮动 div ;
.item 的高度未知。
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div class="header"></div>
<div class="wrap">
<div class="content">
<div class="item">Height of these elements isn't known</div>
<div class="item">Test test</div>
<div class="item">Test test</div>
<div class="item">Test test</div>
</div>
<div class="sidebar">
<div class="menu">
<div class="menu-top">Top of the menu should stay here</div>
<div class="menu-bottom">This part of the menu needs to be sticky, but stop at the end of .wrap</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
JS:
$(document).ready(function(){
// to set the width right even when position is fixed
var divWidth = $('.sidebar').width();
$('.menu-bottom').css('width', divWidth+'px');
var fixmeTop2 = $('.menu-bottom').offset().top;
$(window).scroll(function() {
var currentScroll2 = $(window).scrollTop();
if (currentScroll2 >= fixmeTop2) {
$('.menu-bottom').css({
position: 'fixed',
top: '20px'
});
} else {
$('.menu-bottom').css({
position: 'relative'
});
}
});
});
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
}
.wrap, .footer, .header {
position: relative;
width: 75%;
margin: auto;
overflow: hidden;
background-color: #EBEBEB;
}
.footer, .header {
height: 200px;
background-color: #999;
}
.footer {
height: 2000px;
}
.content {
float: left;
position: relative;
width: 70%;
}
.sidebar {
float: left;
position: relative;
width: 30%;
background-color: #0CF;
}
.item {
height: 300px;
position: relative;
width: 100%;
background-color: #0F6;
margin-bottom: 20px;
box-sizing: border-box;
padding: 20px;
}
.menu-top {
height: 120px;
box-sizing: border-box;
padding: 20px;
}
.menu-bottom {
z-index: 99;
position: relative;
height: 300px;
background-color: red;
box-sizing: border-box;
padding: 20px;
}
做了一些优化,切换了一个额外的 sticky
class。在带有 smoothscroll 和各种 padding-margin 的 Firefox 上进行检查,似乎对确切位置做出了响应:
.sticky {
position: fixed;
}
$(function() {
var wrap = $('.wrap'),
lowmenu = $('.menu-bottom'),
range = $('.sidebar').width(),
fromtop = 60,
edge = parseInt($('.item:last').css('margin-bottom'));
lowmenu.css('width', range);
var fixtop = lowmenu.offset().top-fromtop,
lowpoint = wrap.offset().top+wrap.outerHeight()-lowmenu.outerHeight()-edge-fromtop,
placetop = wrap.outerHeight()-lowmenu.outerHeight()-$('.menu-top').outerHeight()-edge;
$(window).scroll(function() {
var current = $(window).scrollTop();
if (current >= fixtop && current <= lowpoint && !stuck()) lowmenu.addClass('sticky').css('top', fromtop);
else if (current > lowpoint && stuck()) lowmenu.removeClass('sticky').css('top', placetop);
else if (current < fixtop && stuck()) lowmenu.removeClass('sticky').css('top', 0);;
});
function stuck() {
return lowmenu.hasClass('sticky');
}
});
您可以将 fromtop
设置为任意数字。最后一个 .item
的保证金也应该计算在内...