0

私は自分のウェブサイトにこれを使用しています:

var topRange      = 200,  // measure from the top of the viewport to X pixels down
 edgeMargin    = 20,   // margin above the top or margin from the end of the page
 animationTime = 1200, // time in milliseconds
 contentTop = [];
$(document).ready(function(){ 
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
$('html,body').stop();
}
})
// Set up content an array of locations
$('#sidemenu').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
})
// Animate menu scroll to content
$('#sidemenu').find('a').click(function(){
var sel = this,
   newTop = Math.min( contentTop[ $('#sidemenu a').index( $(this) ) ], $(document).height() - $(window).height() );
// get content top or top position if at the document bottom
$('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
window.location.hash = $(sel).attr('href');
});
return false;
})
// adjust side menu
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
  bodyHt = $(document).height(),
  vpHt = $(window).height() + edgeMargin;  // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('#sidemenu li')
 .removeClass('selected')
 .eq(i).addClass('selected');
}
})
})
})

mainnav はページの上部にあり、幅は 100% です。上記のJavaはうまく機能します。ただし、スクロールの問題は、コンテンツがメイン ナビゲーションの下に表示されなくなることです。どうすればこれを防ぐことができますか? scrollTop と offset に関係があることは知っていますが、既存の JavaScript でこれを変更する方法がわかりません。

乾杯、マルティン

4

0 に答える 0