javascript 根据滚动位置固定切换位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6984645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle position fixed depending on scroll position
提问by Tom
I have the following code which fixes the position of a menu at the point that it is going to scroll off the top of the page.
我有以下代码，它在菜单将要滚动到页面顶部时固定它的位置。
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
}
});
css
css
.container {
width:400px;
margin:auto;
}
.header {
background-color:#096;
height:150px;
}
.fixed {
position:fixed;
top:0px;
left:50%;
margin-left:50px;
}
.bodyContainer {
overflow:hidden;
}
.menu {
float:right;
width:150px;
height:250px;
background-color:#F00;
}
.bodyCopy {
float:left;
width:250px;
height:1000px;
}
.footer {
background-color:#096;
height:250px;
}
HTML
HTML
<div class="container">
<div class="header">
<p>Test Header</p>
</div>
<div class="bodyContainer">
<div class="menu">
<p>test</p>
</div>
<div class="bodyCopy">
<p>test</p>
</div>
</div>
<div class="footer">
<p>Test Footer</p>
</div>
What I now want to do is make it start scrolling again when the user reaches the bottom of the page (so that it does not cover the footer in the page).
我现在想要做的是让它在用户到达页面底部时再次开始滚动（这样它就不会覆盖页面中的页脚）。
回答by Konga Raju
Here is new a approach with css3.
这是 css3 的新方法。
use position:stickyto follows the scroll.
用于position:sticky跟随滚动。
Here is the article explained.
这是文章解释。
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
和做这个演示的旧方法
with sticky position demo
带有粘性位置演示
回答by AlienWebguy
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var z = $('.footer').offset().top;
if (y >= top && (y+_height) < z) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
http://jsfiddle.net/AlienWebguy/CV3UA/1/
http://jsfiddle.net/AlienWebguy/CV3UA/1/
If you want the menu to simply stay where it is when it reaches the footer you'll need to add more logic to append it into the DOM:
如果您希望菜单在到达页脚时保持原样，则需要添加更多逻辑以将其附加到 DOM 中：
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
var _original_top = $('.menu').offset().top;
$(window).scroll(function(event) {
var y = $(this).scrollTop();
var z = $('.footer').offset().top;
if (y >= top && (y + _height) < z) {
$('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed');
} else {
if ((y + _height) >= z) {
$('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom');
}
else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed');
}
});
}
I'm sure there's a more elegant way to do this. Play around :) http://jsfiddle.net/AlienWebguy/CV3UA/2/
我相信有一种更优雅的方法可以做到这一点。玩转:) http://jsfiddle.net/AlienWebguy/CV3UA/2/
