Question

我有一个单页网站，其中包含几个用于“页面”的堆叠div。导航中的链接是各种div的跳转链接。

当点击链接时，我正在使用SmoothScroll v1.4.5平滑地自动滚动到div顶部。

该网站具有响应性，并且在CSS中具有5种不同宽度的样式（1440px，960px，760px，480px，320px）。包含nav的div是#header。它有一个固定的位置，高度随各种宽度而变化。

该网站在任何单一尺寸下都能正常工作。但是当我调整窗口大小并且#header的高度发生变化时，自动滚动对每个div顶部的位置都会变得混乱。那是因为目标顶部被标题高度偏移（记住它是固定的，z-index高于内容）并且高度设置一次，在document.ready（）。

每当窗口调整大小时，我都需要重置高度偏移值。

这是我的代码：

<div id="wrap" data-role="page">
<div id="header" data-role="header" data-position="fixed">
    <ul id="mainmenu">
        <li><a href="#background">BACKGROUND</a></li>
        <li><a href="#profiles">PROFILES</a></li>
        <li><a href="#culture">CULTURE</a></li>
        <li><a href="#outlook">OUTLOOK</a></li>
        <li><a href="#factsheet">FACT SHEET</a></li>
    </ul>
</div>
<div id="background"><a id="background"></a>
      some stuff...
    </div>


<script type="text/javascript">
jQuery(function($){
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  function getHeaderOffset(){
    var $header_offset = $("#header").height();
    return $header_offset;
  } 

  $('a[href*=#]').each(function() {
      $header_offset = getHeaderOffset();
  if (filterPath(location.pathname) == filterPath(this.pathname)
        && location.hostname == this.hostname
        && this.hash.replace(/#/,'') ) {
        var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
        var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
        if ($target) {
        var targetOffset = $target.offset().top - $header_offset;
        $(this).click(function() {
            $('html, body').animate({scrollTop: targetOffset}, 1000);
            var d = document.createElement("div");
            d.style.height = "101%";
            d.style.overflow = "hidden";
            document.body.appendChild(d);
            window.scrollTo(0,scrollTop);
            setTimeout(function() {
                d.parentNode.removeChild(d);
            }, 10);
            return false;
        });
        }
    }
  });
});
</script>

我无法找到正确的语法：

1）取$（'a [href * =＃]'）中的内容。每个（function（）并将其转换为可重用的函数

2）然后在$（window）.resize（function（）{

）中调用它

我已经尝试了许多方法，并且已经搜索了论坛并查看了书籍，但我尝试的所有方法都完全打破了导航。有什么建议吗？

在窗口调整大小时调整jQuery Smooth Scroll

0 个答案: