響應式水平頁面滑動

問題

設計響應式水平導航系統面臨幾個挑戰：

• 維護頁視窗內的可見性
• 防止之間的間隙或重疊頁
• 允許頁超出100%高度，並具有捲軸可見性
• 確保與Internet Explorer 9 或更高版本的兼容性

解決方案

該解決方案採用jQuery 並包含以下主要功能：

1. 響應式調整大小：腳本根據頁數計算包裝器的總寬度，並確保響應式縮放。
2. 平滑過渡： 點擊導航連結可以平滑地為包裝器的左邊距設定動畫，頁面之間的轉換不會突然跳躍。
3. 動態高度處理：頁面可以延伸超過 100% 高度，必要時會出現捲軸，消除不需要的間隙。
4. 活動連結指示：所選導航連結以反白顯示目前頁面位置以指示目前頁面位置。
5. IE相容性：程式碼相容於Internet Explorer 9以上版本。

程式碼實作

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth   '%');
  $('.page').width(slideWidth   '%');

  $('a.scrollitem').click(function() {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100   '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});

CSS

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}

結論

此程式碼片段為響應式水平頁面導航提供了全面的解決方案，有效地滿足了規定的要求。它的靈活性允許動態導航選單並適應帶有捲軸的長頁面。此外，它與 Internet Explorer 9 的兼容性確保了與多種瀏覽器的兼容性。