jQuery在顶部激活href-if元素

Question

我有一个简单的菜单，每次我点击一个元素，其他元素就会淡出，如果不是第一个元素，点击的元素就会上升，然后我激活链接的href。

要激活链接，我需要确保元素位于页面顶部，在addClassslideUpSm之后，单击的项目会获得新的位置顶部，但我认为位置顶部需要刷新，因为addClassslideUpSm会获得css top 0

setTimeout(function() {$('.main-nav li').addClass('slideUpSm')}, 1200);

之后，我可以激活窗口位置，我尝试了hasClass方法，还尝试检查新位置top是否等于零，这是我的尝试https://jsfiddle.net/n37kgv4r/

setTimeout(function() {window.location = href}, 100);

Answer 1

如果你只想隐藏其他链接并只导航到点击的节点，我们不需要使用css top。我们可以通过简单的jquery代码来实现这一点。

$(document).ready(function(){
$('.main-nav li a').click(function(e){
$(this).parent().addClass('show');
$('.main-nav li').not('.show').slideUp(1200);
var obj = $(this);
setTimeout(function(){
//remove the alert 
alert("Navigating to "+ obj.attr('href'));
window.location.href=obj.attr('href');},2000)
return false;
});
});

a {
text-decoration: none;
color: black;
}
.main-nav {
position: relative;
}
.main-nav li {
position: sticky;
display: flex;
font-size: 60px;
line-height: 43px;
letter-spacing: -3px;
margin-bottom: 11px;
transition: all 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul class="main-nav">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>