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

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 上删除和添加类的顺序 --> $("#floatingBox").removeClass("up").addClass("box-start");

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>