導航欄固定、錨點平滑滾動

xcold 發布于2019-08-23 16:49 / 754人閱讀

摘要：頁面用的框架頁面布局導航導航一導航二導航三導航四導航欄固定頁面滾動時導航欄高亮顯示方案一為頁面添加頁面滾動監聽事件滾動條距離頂端值滾動條距離頂端值加循環距離頂端值判斷滾動條位置清除類

頁面用的Bootstrap框架

頁面布局

導航欄固定,頁面滾動時導航欄高亮顯示 方案一：

$(window).scroll(function() {
  //為頁面添加頁面滾動監聽事件
  var wst = $(window).scrollTop() //滾動條距離頂端值
  console.log("滾動條距離頂端值:" + wst)
  var len = 5;
  for (var i = 1; i < len; i++) { //加循環
    console.log("item距離頂端值:" + $("#part" + i).offset().top);

    var next = i + 1;
    var itemOffsetTop = $("#part" + i).offset().top;

    console.log(i);
    if (i === (len - 1)) {
      var condition = itemOffsetTop <= wst;
    } else {
      var itemNextOffsetTop = $("#part" + next).offset().top;
      var condition = itemOffsetTop <= wst && itemNextOffsetTop >= wst;
    }
    console.log(condition, i)
    if (condition) { //判斷滾動條位置
      $(".navbar-nav li").removeClass("active"); //清除c類
      $("#navbar" + i).addClass("active"); //給當前導航加c類
    }
  }
})

方案二：

1. 導航欄固定不透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length-1, // 獲取導航菜單 ul li 的個數
      item = new Array(), // 新建一個數組
      sTop = $(window).scrollTop(); // 獲取偏移的高度
  for (var i = 0; i < length; i++) {
      if (i == 0) {
          item[i + 1] = $(".page-wrapper>div:first-child").offset().top;
          if (sTop >= item[i + 1]) {
            $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      } else {
          item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
          if (sTop >= item[i + 1] - 100) {
              $nav.eq(i).addClass("active").siblings("li").removeClass("active");
          }
      }
  }
})

2. 導航欄固定透明

$(window).scroll(function () {
  var $nav = $(".navbar-collapse ul li"),
      length = $nav.length, // 獲取導航菜單 ul li 的個數
      item = new Array(), // 新建一個數組
      sTop = $(window).scrollTop(); // 獲取偏移的高度
  for (var i = 0; i < length; i++) {
    item[i + 1] = $(".page-wrapper>div:nth-child(" + (i + 1) + ")").offset().top;
    if (sTop >= item[i + 1]) {
        $nav.eq(i).addClass("active").siblings("li").removeClass("active");
    }
  }
})

方案三：

利用Bootstrap的data-spy="scroll"










$("body").scrollspy({ target: ".navbar-default" })

錨點平滑滾動

$("a").click(function(){
    //根據a標簽的href轉換為id選擇器，獲取id元素所處的位置，并高度減50px（這里根據需要自由設置）
    $("html,body").animate({scrollTop: ($($(this).attr("href")).offset().top)}, 500);
});

云服務器 GPU云服務器視圖平滑滾動 js平滑滾動 html 滾動錨點導航欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103348.html

導航欄固定、錨點平滑滾動

摘要：頁面用的框架頁面布局導航導航一導航二導航三導航四導航欄固定頁面滾動時導航欄高亮顯示方案一為頁面添加頁面滾動監聽事件滾動條距離頂端值滾動條距離頂端值加循環距離頂端值判斷滾動條位置清除類頁面用的Bootstrap框架頁面布局 Toggle navigation ...

Michael_Lin 2019-08-02 16:12 評論0 收藏0
單頁面官網-平滑過渡到指的錨點

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網--不是傳說中的單頁面應用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

zhaot 2019-08-01 17:28 評論0 收藏0
單頁面官網-平滑過渡到指的錨點

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網--不是傳說中的單頁面應用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

SegmentFault 2019-08-20 18:56 評論0 收藏0
單頁面官網-平滑過渡到指的錨點

摘要：特點單頁面官網不是傳說中的單頁面應用固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如考拉微課布局頂部導航欄內容區底部樣式導航欄的樣式要注意，這給當前樣式單獨做了一個層，絕對定位，鼠標移動特點單頁面官網--不是傳說中的單頁面應用！固定頂部，點擊導航平滑過渡到指定錨點，鼠標上下滾動到錨點位置導航隨之切換如：考拉微課 HTML布局 ...

tianhang 2019-08-29 13:13 評論0 收藏0
認識一下 Material Design Lite 布局組件

摘要：布局組件需要按特定的結構進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側欄菜單布局組件簡化了創建可伸縮頁面的過程。一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應不同的瀏覽器、屏幕尺寸和設備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

wanglu1209 2019-08-28 18:17 評論0 收藏0