这里还是以handsome主题为例,将如下代码添加至自定义JS中即可:

$(function() {
  $(window).scroll(function() {

    var alpha = $(this).scrollTop() / ($(document).height() - $(this).height());
    alpha = 1 - alpha;
    $('#header').css({
      "opacity": alpha,
      "filter": "alpha(opacity=" + alpha + ")" /* 针对 IE8 以及更早的版本 */
    })
  })

})

其他主题只需替换导航栏定位元素即可。

下滑固定距离导航栏消失代码如下:

$(function() {
  $(window).scroll(function() {
    var distance = 30;/*距离参数可根据实际情况调整,使用元素高度可实现响应式效果*/
    var alpha = $(this).scrollTop() / distance;
    alpha = 1 - alpha;
    $('#header').css({
      "opacity": alpha,
      "filter": "alpha(opacity=" + alpha + ")" /* 针对 IE8 以及更早的版本 */
    })
  })
})
最后修改:2019 年 07 月 28 日 12 : 07 AM
如果觉得我的文章对你有用,请随意赞赏