自动隐藏导航触发器第二个元素

Question

我有一个navBar的代码，当你向下/向上滚动时会自动隐藏/显示。

我试图在导航被隐藏时触发第二个元素（#floatingBox）向上移动10px，并在重新出现时向下移动10px。其余的时间，我希望修复#floatingBox并在滚动时“跟随”用户。

问题

#floatingBox将会跟随，但即使我添加/删除该类，也不会移动它的顶部。

我显然遗漏了一些东西。任何帮助将不胜感激。

链接：https://codepen.io/theodore_steiner/pen/ZKbRyG

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navBarHeight = $("header").outerHeight();

$(window).scroll(function(event)
								 {
	didScroll = true;
});

setInterval(function()
						{
	if(didScroll)
	{
		hasScrolled();
		didScroll = false;
	}
}, 100);


function hasScrolled()
{
	var st = $(this).scrollTop();
	
	if(Math.abs(lastScrollTop - st) <= delta)
		return;
	
	if(st > lastScrollTop && st > navBarHeight)
	{
		$('header').removeClass("nav-down").addClass("nav-up");
		$("floatingBox").removeClass("box-start").addClass("up");
	}
	else
	{
		if(st + $(window).height() < $(document).height())
		{
			$("header").removeClass("nav-up").addClass("nav-down");
			$("floatingBox").removeClass("up").addClass("box-start");
		}
	}
	lastScrollTop = st;
}

body
{
    padding-top: 40px;
}

header
{
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up
{
    top: -40px;
}

main
{
  background-color: #f2f2f2; 
	height: 2000px;
}

#floatingBox
{
	height: 230px;
	width: 100px;
	border: 1px solid #ddd;
	position: fixed;
	top: 100px;
	left: 30px;
	transition: top .2s ease;
}

#floatingBox.up
{
	top: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down"></header>
<main>
	<div id="floatingBox" class="box-start"></div>
</main>
<footer></footer>

Answer 1

我认为有两个问题。

首先，在floating-box的jQuery函数中，您需要将其更改为#floating-box。

其次，假设您想要在向上滚动时恢复到原始条件，则需要反转要删除的类的顺序并添加到floating-box - ＆gt; $("#floatingBox").removeClass("up").addClass("box-start");

＆＃13;

＆＃13;

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navBarHeight = $("header").outerHeight();

$(window).scroll(function(event)
								 {
	didScroll = true;
});

setInterval(function()
						{
	if(didScroll)
	{
		hasScrolled();
		didScroll = false;
	}
}, 100);


function hasScrolled()
{
	var st = $(this).scrollTop();
	
	if(Math.abs(lastScrollTop - st) <= delta)
		return;
	
	if(st > lastScrollTop && st > navBarHeight)
	{
		$('header').removeClass("nav-down").addClass("nav-up");
		$("#floatingBox").removeClass("box-start").addClass("up");
	}
	else
	{
		if(st + $(window).height() < $(document).height())
		{
			$("header").removeClass("nav-up").addClass("nav-down");
			$("#floatingBox").removeClass("up").addClass("box-start");
		}
	}
	lastScrollTop = st;
}

＆＃13;

body
{
    padding-top: 40px;
}

header
{
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up
{
    top: -40px;
}

main
{
  background-color: #f2f2f2; 
	height: 2000px;
}

#floatingBox
{
	height: 230px;
	width: 100px;
	border: 1px solid #ddd;
	position: fixed;
	top: 100px;
	left: 30px;
	transition: top .2s ease;
}

#floatingBox.up
{
	top: 90px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down"></header>
<main>
	<div id="floatingBox" class="box-start"></div>
</main>
<footer></footer>

＆＃13;

＆＃13;

＆＃13;