我希望在标题下方有一个div来在滚动时占据顶部固定位置。如果页面向上滚动,则还需要显示标题。
CSS
.header {
height:100px;
background:#ffe1d8;
width:100%;
}
.converter {
height:100px;
background:#9fff42;
width:100%;
}
.content {
width:100%;
background:#faff70;
min-height:800px;
}
.fixed-pos {
position:fixed;
top:0;
z-index:1000;
}
HTML
<div class="header"> </div>
<div class="converter"> </div>
<div class="content"> </div>
的jQuery
$(document).ready(function() {
$( window ).scroll(function() {
$( ".converter" ).addClass("fixed-pos");
if ($( ".converter" ).scrollTop(100 )) {
$( this ).removeClass("fixed-pos");
}
});
});
JsFiddle此处。
在上面的小提琴中,绿色部分(.converter)在向下滚动时占据顶部的固定位置。如果屏幕向上滚动,它将占据顶部相同的位置,隐藏其上方的标题(粉红色)。我希望屏幕向上滚动时显示.converter div上方的标题。
任何帮助?
答案 0 :(得分:4)
应该是
$(window).scroll(function() { //OnScroll, invoke
if($(this).scrollTop() > 100) {
//If the current scroll position is more than 100, add class
$( ".converter" ).addClass("fixed-pos");
} else {
//Else remove it
$( ".converter" ).removeClass("fixed-pos");
}
});
您的解决方案有什么问题?首先,您是立即在滚动上添加类,而不是使用if
条件删除,而不是使用 应该使用$(".converter")
$(this)
引用窗口并比较
感谢@A. Wolff使用.toggleClass()
$(window).scroll(function() {
$(".converter").toggleClass("fixed-pos", $(this).scrollTop() > 100);
});
答案 1 :(得分:0)
这可能对您有用:
$(document).ready(function() {
$( window ).scroll(function() {
var defaultPosition = $('.header').offset().top + $('.header').outerHeight();
if($(window).scrollTop() > defaultPosition){
$( ".converter" ).addClass("fixed-pos");
} else {
$( ".converter" ).removeClass("fixed-pos");
}
});
});
答案 2 :(得分:0)
你可以用css做到这一点......你根本不需要jquery
.header {
height:100px;
background:#ffe1d8;
width:100%;
position:fixed;
}
.converter {
height:100px;
margin-top:100px;
background:#9fff42;
width:100%;
position:fixed;
}
.content {
width:100%;
background:#faff70;
min-height:800px;
}
答案 3 :(得分:0)
我不完全确定你的结果应该是什么。但也许就是这样:
(function () {
var scrollMinimum = 0; // minimum scroll offset to fix the bar
var $scrollTopBar = $('.converter');
var $win = $(window);
var visible = false; // whether the bar is currently shown
$win.on('scroll', function(){
if (visible == false && $win.scrollTop() > scrollMinimum){
visible = true;
$scrollTopBar.addClass('fixed-pos');
} else if (visible == true && $win.scrollTop() <= scrollMinimum) {
visible = false;
$scrollTopBar.removeClass('fixed-pos');
}
});
})();