一頁導航阻止了我的內容

Question

我試圖做一個最小版本的問題。 簡而言之，我正在做標題與導航，滾動時總是停留在頁面的頂部。

現在的問題是，如果您嘗試單擊導航中的某個部分，那么當您滾動到該部分時，導航會妨礙您瀏覽頂部的一半內容。

這意味着用戶必須向后滾動一點才能正確查看內容。 我正在使用lorem ipsum作為那里的內容替換。

當用戶單擊導航按鈕時，我將如何調整瀏覽器位置的位置，以便正確定位窗口？

https://jsbin.com/hopiqe/edit?html,css

Answer 1

以利

僅使用HTML / CSS，您必須像Kommodore建議的那樣進行破解才能使其正常工作。 您確實需要JS才能正確執行此操作。

您可以使用jQuery和一些先見之明來做到這一點：

  // Button 1 is what you click to start the interaction
  $(".button1").click(function() {
    // Using jQuery Animate and ScrollTop...
    $('html, body').animate({
        // We point user to div1
        // We have an offset from the top of the window minus 50px
        // `-50` should match the height of your header
        scrollTop: $("#div1").offset().top-50
    // 500 is milliseconds to do the `Animate` interaction
    }, 500); 
  });

您也可以結合使用jQuery插件ScrollTo和LocalScroll 。

我連接了一個工作正常的CodePen ，它以您提供的代碼為基礎。 JS可能需要進一步收緊，但您應該了解一下。

Answer 2

最簡單的方法是在每個div前面添加另一個div作為height: 140px的占位符（然后必須調用該div而不是div），或者為每個div使用margin-top: 140px 。