jQuery Smooth Page Anchor Übergänge mit Position: festes Menü - jquery, scroll, anchor

Ich benutze eine Position: Festes Menü bei http://communitychessclub.com/index.php So halten Sie das Menü auf dem Bildschirm, auch wenn der Benutzer einen Bildlauf ausführt:

CSS:

#sticky {margin:0 auto; display:table}
#sticky.stick {position: fixed;  top: 0; margin-left:48px; z-index: 10000; }

JS:

<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $("#sticky-anchor").offset().top;
if (window_top > div_top)
$("#sticky").addClass("stick")
else
$("#sticky").removeClass("stick");
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

$(window).scroll((function() {
var a="",  // a buffer to the hash
w = $(window);
return function() {
var h = location.hash;
// if hash is different from the previous one, which indicates
// the hash changed by user, then scroll the window down
// update the buffer
if (h != a) {
a = h;
w.scrollTop(w.scrollTop()-150)
}
};
})());
</script>

Die Leute beschweren sich jedoch, dass ein Link zu einer ID auf derselben Seite zu einem plötzlichen Bildlauf des Bildschirms führt. Also fand ich unter "Verbessern der Benutzererfahrung mit jQuery Smooth Page Anchor-Übergängen" http://www.spydertrap.com/blog/2012/08/user-experience-jquery-smooth-page-anchor-transitions/ und mochte die Demo. Hat mir so gut gefallen, dass ich den folgenden JQuery-Code mit dem obigen JQuery-Code mischen möchte, um einen reibungslosen JQuery-Bildlauf zu ermöglichen.

Sie benutzen dies (aber es gibt andere Versionen hier ... Problem ist, wie man die beiden verbindet)

jQuery-Code:

function goToByScroll(id){
$("html,body").animate({scrollTop: $(id).offset().top},"slow");
}

HTML:

<ul class="nav">
<li><a href="#chapter1">Chapter 1</a></li>
<li><a href="#chapter2">Chapter 2</a></li>
<li><a href="#chapter3">Chapter 3</a></li>
</ul>

JS-Launcher:

$(document).ready(function(){
$(".nav a").click(function(){
goToByScroll($(this).attr("href"));
return false;
});
});

Ist es möglich, sich mit dem obigen jquery-Code zu vereinen?

Antworten:

0 für die Antwort № 1

Ich habe es gerade versucht, indem ich Ihre Seite über die JS-Konsole des Chrome-Browsers gehackt habe. Ich habe die Funktion hinzugefügt goToByScroll wörtlich und dann ausgeführt:

$("#sticky a").click(function(){
goToByScroll($(this).attr("href"));
return false;
});

Und tatsächlich scrollt es zwischen Anker-IDs. Es gibt ein kleines Problem damit, dass eine Ausnahme ausgelöst wird, wenn Sie auf Links in Ihrer Navigationsleiste klicken, die keine tatsächlichen Ankerlinks sind (z. B. "Home" verweist auf die Startseite, und "Chess Camp" öffnet ein Popup-Fenster) Fügen Sie den Ankerverknüpfungen, für die Sie einen Bildlauf durchführen möchten, eine Klasse hinzu, und fügen Sie diese Klasse dann der Auswahl hinzu.

Ändern Sie beispielsweise Ihr Markup, damit die klebrige Menüleiste wie folgt aussieht:

<li><a href="http://www.chessset.com/">Chess Center</a>
<div><ul>

<li><a class="anchor" href="#cc_events">about the RCC</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_chess_lessons.php",boxid:"RCC_chess_camp", width:950, height:650}); return false;">chess camp</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_Marchand_Open.php",boxid:"RCC_marchand", width:1000,height:600}); return false;">Marchand Open</a></li>

<li><a href="#" onclick="TINY.box.show({url:"RCC_weekly_schedule.php", boxid:"RCC_schedule", width:775, height:600}); return false;">weekly schedule</a></li>

<li><a class="anchor" href="#picnic">annual picnic</a></li>

<li><a href="http://www.chessset.com/">Chess gear sale</a></li>

</ul></div>
</li>

(hinzugefügt class="anchor" auf alle Links, die auf einen Hash auf derselben Seite verweisen.)

Und füge dies zu deinem Javascript hinzu:

// sticky_relocate function here

// Add this function exactly from your example
function goToByScroll(id){
$("html,body").animate({scrollTop: $(id).offset().top},"slow");
}

// modify your onReady jQuery handler to this:
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();

// Added the .anchor to the selector
$("#sticky a.anchor").click(function(){
goToByScroll($(this).attr("href"));
return false;
});
});

// your $(window).scroll goes here

Das sollte für Sie funktionieren, ohne Fehler zu werfen.

---