javascript - Navbar hiding text after clicking on anchor link - Stack Overflow

admin管理员组

文章数量:1287611

I've recently been using Twitter Bootstrap, and I've been loving it.

I've created a navbar that is fixed to the top, and inside it is my logo, a header, a few links, and a dropdown that says "Jump to:". Upon clicking on the dropdown, a menu es down with four links to a section within the page. All of the links work.

My problem is that because the header of each section is now placed at the top of my page, my fixed navbar blocks it. Is there anyway I can stop this from happening? A bit of jQuery or something?

This is my website: fishyfishy2014.gweb.io. Thanks in advance.

I've recently been using Twitter Bootstrap, and I've been loving it.

I've created a navbar that is fixed to the top, and inside it is my logo, a header, a few links, and a dropdown that says "Jump to:". Upon clicking on the dropdown, a menu es down with four links to a section within the page. All of the links work.

My problem is that because the header of each section is now placed at the top of my page, my fixed navbar blocks it. Is there anyway I can stop this from happening? A bit of jQuery or something?

This is my website: fishyfishy2014.gweb.io. Thanks in advance.

• javascript
• html
• css
• navbar

Share Improve this question Follow edited Feb 4, 2014 at 14:03 2ndkauboy 9,39733 gold badges3333 silver badges6666 bronze badges asked Feb 4, 2014 at 13:04 JaredCubillaJaredCubilla 59811 gold badge99 silver badges2525 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I think you are asking about an anchor jump, which will place the matching anchor to the top of the viewport and "under" the fixed nav. I had a similar issue and used this code:

/* fixing anchor jumps */

var nav_height = 77; // pixels

$(window).bind('hashchange', function(e){
    if($(location.hash).hasClass('anchor')){
        scrollBy(0, nav_height);
    }
    return false;
});
$(document).ready(function(){
    if($(location.hash).hasClass('anchor')){
        $('html,body').animate({
            scrollTop: $(location.hash).offset().top - nav_height - 10
        }, 10 );
    }
});

You just have to add the anchor CSS class to any element, you want be able to jump to.

In CSS, there is also the scroll-margin-top property that sets the element's scroll margin to the top side. You need to apply to anchored element a class, for exemple .anchor After that, you can apply this :

.anchor {
    scroll-margin-top: 77px;
}

You need to set this:

body { padding-top: 70px; }

This is ing from the Bootstrap docs itself

Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

You can check here

The following works without any JS:

a:not([href]):before {
    display: block;
    content: "";
    height: 60px;
    margin: -60px 0 0;
}

a:not([href]) assumes that your anchors don't have a href attribute. Change both occurrences of 60px to a value of your choice.

Actually, 2ndkauboy's solution does work. In short:

1. get rid of the 'px' in nav_height variable (...as you said)

2. use the anchor css class (...as 2ndkauboy said) but DONOT use it on the <a> tag but on the <div>, as follows:

   <a href="#jump_here">click here</a> ... other code here ... <div id="jump_here" class="anchor"> ... content ... </div>

Hope it helps.

本文标签： javascriptNavbar hiding text after clicking on anchor linkStack Overflow