背景DIV被锚定到浏览器顶部

Question

我希望我能够解释这一个好，但我正在一个网站上有多个（背景）DIVS堆叠在一起，每个包含背景图像。我有，当点击浏览器的每个DIV一个按钮scolls以使该DIV眼帘......我希望这说明了情况较好：

与工作完全正常的浏览器的背景图像大小调整除了一个小问题......除非我的TOP股利 - 当我更改背景图片开始slidding了网页浏览器的高度，再次，我希望这有助于截图：

我希望能够锁定当前/活动的bac当重新调整大小时，将kground拖动到浏览器的顶部。这可能吗？

我现在在工作，所以无法提供任何我现有的代码，直到后来，但我希望有人在那里可能有同样的问题，并轻松解决它？

*编辑*

这里是我当前的代码：

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>