[英]Fix Div to top when scroll
滚动时,我使用以下代码将div固定到页面顶部。
$('.container').data("top", $('.container').offset().top);
$(window).scroll(function(){
if ($(window).scrollTop() > $('.container').data("top")) {
$('.container').css({'position': 'fixed', 'top': '0'});
}
else {
$('.container').css({'position': 'static', 'top': 'auto'});
}
});
Element和父css如下。
父级
.content-right {
width: 688px;
margin-top: 11px;
margin-right: 10px;
float: right;
}
元件
.container {
background: #FFF;
background-color: #FFF;
width: 687px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
margin-right: 10px;
margin-bottom: 20px;
}
但是,当我滚动页面时,该元素不会固定在页面顶部。 如何解决此问题?
更新资料
容器是常见样式。 有几个具有相同样式的元素,我使用了一个类来标识所需的元素。 我已将代码更改为此。
小提琴 小提琴
你可以试试:
var $container = $('.payment-info-container'),
top = $container.offset().top + $container.outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > top) {
$container.css({'position': 'fixed', 'top': '0'});
} else {
$container.css({'position': 'static', 'top': 'auto'});
}
});
参见演示 。 顺便说一句,您没有在小提琴中加载jquery资源。
试试这个 。
/* Dynamic top menu positioning
*
*/
var num = 50; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.