CODEWITHSUNDEEP
jqueryhtmlcss
user1406448
user1406448

Reputation:

How to scroll a web page with fixed navigation bar just before arrive to a section or div?

I think the title is enough to understanding my problem.

I'm working on a one page HTML template with fixed navigation bar. When I scroll down, it comes over my section title. I've coded like this:

<a href="#service"></a>
<section id="services"></section>

I want to scroll down just a little before top of my section.

Thank you.

Upvotes: 0

Views: 106

Answers (2)

Brian McCall
Brian McCall

Reputation: 1907

I created this small snippet to solve a problem similar to this. http://codepen.io/mccell/pen/DdyKl/

There are some notes in the code. But basically it uses jquery's scrolltop to move the anchorlink to the top of the page but also adds the ability to offset with a custom data-offset attribute.

This is the main working part of the code. 

  $('html, body').animate({
    scrollTop: $(target).offset().top-offsetValue
   }, 1000);

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

Give the content div a padding-top, or margin-top of the height of the nav bar:

<a href="#link">Link</a>
<div id="link" class="content">
    Content Here...
</div>

CSS:

.content{
    padding-top:50px;
}

JSFiddle Demo

Upvotes: 1

Related Questions