One page navigation blocking my content

Question

I tried to do a minimal version of the problem i am having. In short i am doing header with navigation that always sticks to the top of page when scrolling.

Now the problem is if you try and click on a section in the navigation, when you get scrolled to the section the navigation blocks half the content at the top by getting in the way.

This means the user has to scroll back up a little to see the content properly. I am using lorem ipsum as content replacement there.

How would i adjust where my browser position lands when the user clicks the navigation button so i can position the window correctly?

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

Answer 1

Eli-

Using HTML/CSS only, you'd have to do a hack like Kommodore suggests to get this working properly. Your really need JS to do this right.

You can do this with jQuery and a little foresight:

  // 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); 
  });

You could also use a combination of jQuery plugins called ScrollTo and LocalScroll .

I wired up a working CodePen that builds off the code you provided. The JS probably needs more tightening but you should get the idea.

Answer 2

最简单的方法是在每个div前面添加另一个div作为height: 140px的占位符（然后必须调用该div而不是div），或者为每个div使用margin-top: 140px 。