我正在尝试实现这个小提琴的代码: https://jsfiddle.net/h7818era/
HTML --------------------------------------------------------------------
<div class="da">
<a href="#diva" class="current">DIV1</a>
<a href="#divb">DIV2</a>
<a href="#divc">DIV3</a>
<a href="#divd">DIV4</a>
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
JS --------------------------------------------------------------------
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
$('.da').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
})
// Animate menu scroll to content
$('.da').find('a').click(function(){
var sel = this,
newTop = Math.min( contentTop[ $('.da 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 ) ) ){
$('.da a').removeClass('current').eq(i).addClass('current');
}
})
})
});
CSS --------------------------------------------------------------------
.da{
position:fixed;
z-index: 2;
}
.da .current,.da .current:hover{
background-color: #000;
}
.db{
}
(我从另一个Stack Overflow线程得到它,但不幸的是记得,最初编码它的人)进入这个网站:http://bendrummer.de
出于某种原因,它不起作用。我的错误在哪里?我现在已经看过好几次了,但现在真的应该可以了。
提前多多感谢。
答案 0 :(得分:1)
您需要添加jquery。最初的小提琴装有jquery 1.64。如果你添加它就可以了!
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
$('.da').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
})
// Animate menu scroll to content
$('.da').find('a').click(function(){
var sel = this,
newTop = Math.min( contentTop[ $('.da 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 ) ) ){
$('.da a').removeClass('current').eq(i).addClass('current');
}
})
})
});
.da {
position:fixed;
z-index: 2;
}
.da .current, .da .current:hover {
background-color: #000;
}
.db {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="da"> <a href="#diva" class="current">DIV1</a>
<a href="#divb">DIV2</a>
<a href="#divc">DIV3</a>
<a href="#divd">DIV4</a>
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a>
</div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a>
</div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a>
</div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a>
</div>
</div>