[英]jQuery stick div on scroll
I have a top fixed div and then a main frame which contains two divs inside (left and right). 我有一个顶部固定div,然后是一个内部包含两个div(左侧和右侧)的主框架。 I want to make the right div stick just under the top bar on scroll.
我想使正确的div棒位于滚动条顶部的下方。
I've put up what I have here: http://jsfiddle.net/mhD9Y/2/ 我在这里放了我的东西: http : //jsfiddle.net/mhD9Y/2/
$(document).ready(function(){
var window_top = 41 - $(window).scrollTop();
var div_top = $('#stop_scroll').offset().top;
if (window_top > div_top)
$('#right').addClass('stick');
else
$('#right').removeClass('stick');
});
.stick {
position: fixed !important;
top: 41px !important;z-index: 5 !important; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
The thing is that the script doesn't kick in at all. 关键是脚本根本不会启动。
thanks 谢谢
Put your code with window scroll. 将您的代码与窗口滚动。
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() - 41;
var div_top = $('.right').offset().top;
if (window_top > 41) {
if (!$('.right').is('.stick')) {
$('.right').addClass('stick');
}
} else
$('.right').removeClass('stick');
});
});
Either you change the id="right" to class="right" 您可以将id =“ right”更改为class =“ right”
OR 要么
Change your css of the 更改您的CSS
.stick and add !important at the end of each attribute. .stick并在每个属性的末尾添加!important。
Script: 脚本:
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() - 41;
var div_top = $('#stop_scroll').offset().top;
console.log(window_top, div_top);
if (window_top > div_top) {
$('#right').addClass('stick');
} else {
$('#right').removeClass('stick');
}
});
});
CSS: CSS:
.stick {
position: fixed !important;
top: 41px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.