Button Scrolling in a Single page (Help)

JavaScript
1

Hello, ive been using the code:
$("#home").click(function() {
$(‘html,body’).animate({
scrollTop: $("#heading-home").offset().top},
500); });
to scroll through my page.

It works, but my problem is that, because I have a fixed header, the header overlaps the heading of the content I’m supposed to scroll to. How can I tweak the code so that it doesnt over lap or do I have yo change it? Thanks! :slight_smile:

here’s my link https://codepen.io/scotvigilia/pen/Vxvdyr?editors=1010

2

Floating Navbars section, last solution, probably (since your backgrounds differ between target sections)
http://vipinjeetsandhu.com/FreeCodeCamp/personal-css-cheatsheet/#Floating_Navbars

3

I’m having a hard time implementing it, i don’t understand how the negative value for the margin and other styles work.

4

The whole page is shorthand for my own use to answer one of the FCC coding projects. I’ll be happy to expand on the last (most general) solution. First things first, take a look at the box model in CSS - how padding, margin, and border work. Next, look at the code I proffered as a solution:

.nav-target {
  border-top: 116px solid transparent;
  margin-top: -116px;
  background-clip: padding-box;
}

Third, read the explanation of the code:
border-top only applies a border to the top edge of the item with class nav-target. When we make it transparent, it means that the border will be colorless, so even if it overlaps the previous element, you’ll see the element that precedes it in its entirety.

margin-top: by setting this negative, instead of forcing space between adjacent HTML elements, we actually cause them to overlap. Normally, by setting margin-top negative, later .wells like your “About Me” section would cover up the bottom of your “Welcome” section. However, because the part of the “Welcome” that overlaps the “About” section is a 116px high top-side transparent border, we see the entirety of the about section. I chose 116px because that’s the height of your navbar per Firefox’s developer tools (116.25px).

background-clip lets us set how far out in the Box Model we want our backgrounds to extend. Basically, this will make sure that the browser doesn’t render any color under your transparent top border.

Finally*, and this is the clever bit: when the browser scrolls to the well with the appropriate id, it targets the whole CSS box, which means that it aligns the top border of the element with the top of the viewport, not the content. So, the transparent border gets tucked up under your navbar and your user gets a seamless experience.

Another (smaller) problem I see is that the ids you are targeting with your scrolling are heading elements, not the actual div’s with the class .well. Just move the id to the respective wells, and it should work.

1 Like
5

Wow it all makes sense now. From what I understand, in-short, I add invisible borders and margins to my content so that when I navigate through my .well, the invisible margin and borders that I added will overlap with my navigation bar and not with my content. Thanks so much! I got it to work! :slight_smile:

1 Like
6

You have got the gist. One minor correction: The way bootstrap works, the “nav-bar” class puts the nav div “above” the other elements on the page (at a higher z-index), which means that the invisible border will be “underneath” the navbar, but “over” the element above it on the page.

1 Like
7

Alright alright, thanks a lot!

1 Like