[英]codepen: jQuery .css() edit when scrolldown past anchor, vice versa
codepen http://codepen.io/mathiasvanderbrempt/pen/mJjjrx codepen http://codepen.io/mathiasvanderbrempt/pen/mJjjrx
I need to figure out why this jquery isn't working... 我需要弄清楚为什么这个jQuery不起作用...
I want to make the .navigationfx
drop down (top = 0px) when its scrolltop() reaches the first section (should I add a class or id?). 我想在.navigationfx
的scrolltop()到达第一部分时使其下拉(顶部= 0px)(我应该添加类还是ID?)。 Accordingly, I want to make it move up (top = -30px) when it scrolls back up past it. 因此,当它向后滚动过去时,我想使其向上移动(顶部= -30px)。
$(function(){
//last scroll will always save the current scroll position value
var CurrentScroll = 0;
$(window).scroll(function(event){
var NextScroll = $(this).scrollTop();
if (NextScroll > CurrentScroll){
//codes related to down-ward scrolling here
if ($(window).scrollTop() > $('section').scrollTop())
{
$('navigationfx').css('top', '0px')
}
else {
$('navigationfx').css('top', '-100px')
}
}
else {
//codes related to upward-scrolling here
if ($(window).scrollTop() < $('section').scrollTop())
{
$('navigationfx').css('top', '-100px')
}
else {
$('navigationfx').css('top', '0px')
}
}
//Updates current scroll position
CurrentScroll = NextScroll;
});
});
css 的CSS
.navigationfx {
visibility: ;
position: fixed;
z-index: 2;
margin: 0 auto;
padding: 5px 0 0 0;
width: 100%;
top: -50px;
left: 0;
background: rgba(250,250,250,0.5);
text-align: center;
color: #333;
border-bottom: 1px solid #dddedf
}
Few things: 一些事情:
You select the first section form the matched set as: 您从匹配集中选择第一部分为:
$('section').first();
Since, the section has no scroll, you would have to use the offset top as: 由于该部分没有滚动,因此您必须将offset top用作:
$('section').first().offset().top;
Do not scan the DOM over and over for the same element. 不要一遍又一遍地扫描DOM来查找同一元素。 Store a reference and use it as you need as: 存储参考,并根据需要使用它:
var $nav = $(".navigationfx");
var $firstSection = $('section').first();
Not sure if this is what you wanted, but, here is your pen updated 不确定这是否是您想要的,但是,这是您的笔更新的
PS It's okay to use .css()
to add/update top
for this specific scenario and doesn't have to be add/remove a class. PS可以使用.css()
添加/更新此特定方案的top
,而不必添加/删除类。
Because $('section').scrollTop()
permanently equal 0
. 因为$('section').scrollTop()
永久等于0
。
Change it to $("section").offset().top
. 将其更改为$("section").offset().top
。
http://codepen.io/anon/pen/jPpeKv http://codepen.io/anon/pen/jPpeKv
When you log $('section').scrollTop()
to the console, you'll see that it always returns zero. 当您将$('section').scrollTop()
登录到控制台时,您将看到它始终返回零。 Instead, use $('section').offset().top
. 而是使用$('section').offset().top
。
You are also missing a .
您还缺少一个.
in the navigationfx selector. 在navigationfx选择器中。
$(function(){
//last scroll will always save the current scroll position value
var CurrentScroll = 0;
$(window).scroll(function(event){
var NextScroll = $(this).scrollTop();
if (NextScroll > CurrentScroll){
//codes related to down-ward scrolling here
if($(window).scrollTop() > $('section').offset().top)
{
$('.navigationfx').css('top', '0px')
}
else {
$('.navigationfx').css('top', '-100px')
}
}
else {
//codes related to upward-scrolling here
if($(window).scrollTop() < $('section').offset().top)
{
$('.navigationfx').css('top', '-100px')
}
else {
$('.navigationfx').css('top', '0px')
}
}
//Updates current scroll position
CurrentScroll = NextScroll;
});
});
$('navigationfx') => $('.navigationfx')
and I think all this code can be shorten to that: 我认为所有这些代码都可以简化为:
$(function(){
$(window).scroll(function(event){
var offset = $(window).scrollTop() > $('section').offset().top?'0px':'-100px';
$('.navigationfx').css('top', offset);
});
$(window).scroll();
});
codepen: http://codepen.io/anon/pen/YXjJLG codepen: http ://codepen.io/anon/pen/YXjJLG
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.