it-swarm.com.de

Bootstrap-Scrollspy-Offset auf einer festen Navigationsleiste funktioniert nicht

Ich habe hier eine Fiedel meines Problems erstellt und teste: http://jsfiddle.net/aVBUy/7/

Das Problem ist, wenn ich auf Navbar-Elemente klicke, habe ich ein Skript, das zur Element-ID scrollt. Und ich verwende scrollspy, um die Nav-Elemente hervorzuheben, wenn sich die Seite in der richtigen Position befindet. Der Scrollspy ändert jedoch nur den aktiven Status, wenn er oben im Browser/Gerät angezeigt wird. Da meine Navbar fest ist, brauche ich einen Offset für den Scrollspy, der um 51px (Navbar-Höhe) versetzt ist.

Ich habe alles ausprobiert und kann es nicht zum Laufen bringen. Bitte überprüfen Sie meine Geige und sehen Sie, ob Sie finden können, wo ich falsch liege. Das würde mir sehr helfen.

Hier ist mein minimierter Code ...

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#"><img src="img/logo.gif" alt="" /></a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#welcome" data-scroll="#welcome">Welcome</a></li>
                    <li><a href="#about" data-scroll="#about">About</a></li>
                    <li><a href="#route" data-scroll="#route">The Route</a></li>
                    <li><a href="#bike" data-scroll="#bike">The Bike</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div id="welcome" class="row-fluid">
        <div class="span12">
            <h3>Welcome</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="about" class="row-fluid">
        <div class="span12">
            <h3>About the ride</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="route" class="row-fluid">
        <div class="span12">
            <h3>The Route</h3>
            ...
        </div>
    </div>
    <hr />
    <div id="bike" class="row-fluid">
        <div class="span12">
            <h3>The Bike</h3>
            ...
        </div>
    </div>
    <hr>
    <footer>
        <p class="muted"><small>© 2013 All rights reserved.</small></p>
    </footer>
</div>

CSS

body {
    padding: 51px 0 0;
}
/* Override Bootstrap Responsive CSS fixed navbar */
 @media (max-width: 979px) {
    .navbar-fixed-top, .navbar-fixed-bottom {
        position: fixed;
        margin-left: 0px;
        margin-right: 0px;
    }
}
body > .container {
    padding: 0 15px;
}

SKRIPT

var offsetHeight = 51;

$('.nav-collapse').scrollspy({
    offset: offsetHeight
});

$('.navbar li a').click(function (event) {
    var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - offsetHeight;
    $('body,html').animate({
        scrollTop: scrollPos
    }, 500, function () {
        $(".btn-navbar").click();
    });
    return false;
});

GEIGE

http://jsfiddle.net/aVBUy/7/

15
Joshc

Sie müssen den Versatz auf den Körper anwenden.

$('body').scrollspy({
   offset: offsetHeight
});

Außerdem müssen Sie mindestens einen Wert von offsetHeight in der folgenden Zeile subtrahieren. Andernfalls funktioniert das Bild beim Scrollen nicht.

var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
22
Schmalzy

Sie können dies auch ohne Javascript (über Datenattribute) erreichen, indem Sie data-offset="51" zusätzlich zu data-target deklarieren.

Quelle: https://getbootstrap.com/docs/3.3/javascript/#scrollspy-usage

9
Zoltán

Mit nur Javascript funktioniert das so einfach:

$( document ).ready(function() {
    //Scrollspy offset
    $("body").scrollspy({target: "#scroll-nav", offset:200});
});
3
Turbojohan

Es gibt einen einfacheren Weg, dies mit den Attributen des HTML-Tags zu tun, an dem Sie Spion einschalten möchten.

<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-  bottom="425" id="prepare-navigation">
  <li class="nav-header">Where?</li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-day-time">When?</a></li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-overnight">Why?</a></li>
</ul>

Die Attribute data-offset-top und data-offset-bottom können in Verbindung mit dem Betrag verwendet werden, um den Sie den Wert erhöhen möchten. Viel einfacher!

Sehen Sie sich diesen Link für eine bessere Erklärung an: https://stackoverflow.com/a/18326668/335567

2
Deano

Kleine Code-Korrektur für Bootstrap 3 (es gibt einen kleinen Fehler, wenn die nicht minimierte Version des Menüs angeklickt wird/etwas Flimmern//)

$('.navbar li a').click(function (event) {
var scrollPos = $('body > .container').find($(this).attr('href')).offset().top - (offsetHeight - 1);
$('body,html').animate({
    scrollTop: scrollPos
}, 500, function () {
    if ($("div.navbar-collapse").hasClass("in")) {
        $(".navbar-toggle").click();
    } else {

    }
});
return false;});
1
AKIRA

Im CSS sollte das Attribut body des Tags position den Wert relative haben

0
Zahid Hossain