html - 背景 DIV 锚定到浏览器顶部

Question

我希望我能解释清楚这一点，但我正在开发一个网站，该网站有多个(背景)DIVS 相互堆叠，每个 DIVS 都包含一个背景图像。我为每个 DIV 都有一个按钮，单击该按钮时浏览器会弹出该 DIV 的 View ...我希望这能更好地说明情况:

背景图像随浏览器调整大小，除了一个小问题外，它工作得很好......除非我在 TOP Div - 当我改变浏览器的高度时，背景图像开始向下滑动页面，再次，我希望这张截图能有所帮助:

我希望能够在调整大小时将当前/事件背景锁定到浏览器的顶部。这可能吗？

我目前在工作，所以无法提供我现有的任何代码，但我希望有人可能遇到同样的问题并轻松修复它？

* 编辑 *

这是我当前的代码:

“按钮”的 HTML:

<div id="Container" class="sp-full">

<div>
    <a href="#divIntro"><div id="btnIntro"></div></a>
</div>
<div>
    <a href="#divCode"><div id="btnCode"></div></a>
</div>
<div>
    <a href="#divData"><div id="btnData"></div></a>
</div>
<div>
    <a href="#divDesign"><div id="btnDesign"></div></a>
</div>
<div>
    <a href="#divOrbit"><div id="btnOrbit"></div></a>
</div>
<div>
    <a href="#divComingSoon"><div id="btnComingSoon"></div></a>
</div>

背景如下(减去内容):

<div class="divBackround divIntro">
</div>

<div id="divCode" class="divBackround">
</div>

<div id="divData" class="divBackround">
</div>

<div id="divDesign" class="divBackround">
</div>

<div id="divOrbit" class="divBackround">
</div>

<div id="divComingSoon" class="divBackround">
</div>

让奇迹发生的 Javascript:

$(document).ready(function () {
    $("a").on('click', function (event) {

        if (this.hash !== "") {

            event.preventDefault();

            var hash = this.hash;

            $('html, body').animate({
                scrollTop: $(hash).offset().top - 50
            }, 800, function () {

                window.location.hash = hash;
            });
        }
    });
});

Answer 1

要完成这项工作，您需要跟踪的不是滚动位置本身，而是所选元素的相对位置。

然后，当您调整大小时，重新计算其正确的顶部位置值。

(function(timeout) {
  var position;
  
  function keepposition() {
    window.scrollTo(0, window.innerHeight * position);
  }

  function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 20;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 20);
    }, 10);
  }

  window.addEventListener("load", function() {
    var buttons = document.querySelectorAll('button');
    for (var i = 0; i < buttons.length; i++) {
      (function(i){
        buttons[i].addEventListener('click', function(e){
          position = parseInt(this.getAttribute('data-pos'));
          scrollTo(document.body, window.innerHeight * position, 600);
        }, false);
      })(i);
    }
  }, false);

  window.addEventListener("resize", resized, false);
  function resized() {
    if ( !timeout ) {
      timeout = setTimeout(function() {
        timeout = null;
        resizeHandler();
       }, 10);
    }
  }
  
  function resizeHandler() {
    keepposition();
  }    
}());

html, body {
  margin: 0;
}
.bkg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  background: red;
}
.bkg.nr1 {
  top: 100vh;
  background: yellow;
}
.bkg.nr2 {
  top: 200vh;
  background: green;
}

button {
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  z-index: 1;
}
button + button {
  left: 80px;
}
button + button + button {
  left: 160px;
}

<button data-pos="0">First</button><button data-pos="1">Second</button><button data-pos="2">Third</button>

<div class="bkg nr0"></div>
<div class="bkg nr1"></div>
<div class="bkg nr2"></div>