jQuery激活顶部的href if元素

Question

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

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

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

在此之后，我可以激活窗口位置，我尝试了hasClass方法，并尝试检查新位置顶部是否等于零，下面是我的尝试https://jsfiddle.net/n37kgv4r/

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

Answer 1

如果您只是想隐藏其他链接，并导航到只点击的节点，我们不需要使用css顶部。我们可以通过简单的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>

​