[英]One page navigation blocking my content
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.
我正在使用lorem ipsum作为那里的内容替换。
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 https://jsbin.com/hopiqe/edit?html,css
Eli- 以利
Using HTML/CSS only, you'd have to do a hack like Kommodore suggests to get this working properly. 仅使用HTML / CSS,您必须像Kommodore建议的那样进行破解才能使其正常工作。 Your really need JS to do this right.
您确实需要JS才能正确执行此操作。
You can do this with jQuery and a little foresight: 您可以使用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);
});
You could also use a combination of jQuery plugins called ScrollTo and LocalScroll . 您也可以结合使用jQuery插件ScrollTo和LocalScroll 。
I wired up a working CodePen that builds off the code you provided. 我连接了一个工作正常的CodePen ,它以您提供的代码为基础。 The JS probably needs more tightening but you should get the idea.
JS可能需要进一步收紧,但您应该了解一下。
最简单的方法是在每个div前面添加另一个div作为height: 140px
的占位符(然后必须调用该div而不是div),或者为每个div使用margin-top: 140px
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.