相對於固定的位置 - 如何向下滑動？

我有我的菜單，所有設置，很好去，和我目前的JS沒有頁面跳到各地都很好。我遇到的問題是讓我的「固定」導航向上/向下滑動，而不是從無處出現。相對於固定的位置 - 如何向下滑動？

目前，我有jQuery是激活一個類約300px~下屏幕，這將菜單的位置從相對固定。

請注意：我最初設法使用靜態定位工作，但在我的網站上使用z-index和其他一些元素很困難，所以我希望定位保持相對（而不是靜態）。我也不想用javascript以任何方式複製菜單（已經看過一些例子）。

當菜單位置更改爲固定時，如何使用jquery或css實現滑動和滑動效果？

我的代碼如下，非常感謝。

HTML：

<div class="nt-main-navigation-sticky"> 
    <!-- my nav, logo, etc, is in here. --> 
</div>

CSS：

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

JQUERY：

// get my header height 
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight(); 


// add/remove body class 
$(window).scroll(function() { 

    if($(window).scrollTop() > getHeaderHeight + 200) { 

     $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 

    } else { 

     $('body').removeClass('activeScroll').css('padding-top', 0); 

    } 

});

來源

2016-08-18 Notorious

添加過渡到你的CSS：

.nt-main-navigation-sticky { 
    position: relative; 
} 


.activeScroll .nt-main-navigation-sticky { 
    position: fixed; 
    top: -50px; // or whatever the height of the navbar 
    left: 0; 
    transition: top 600ms; 
}

和js：

if($(window).scrollTop() > getHeaderHeight + 200) { 

    $('body').addClass('activeScroll').css('padding-top', getHeaderHeight); 
    $('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition 

} else { 
    $('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition 
    $('body').removeClass('activeScroll').css('padding-top', 0); 

}

來源

2016-08-18 04:49:08

相對於固定的位置 - 如何向下滑動？

回答

相關問題