滾動到一個div並添加活性類到當前的div

的標籤我有7個突片滾動到一個div並添加活性類到當前的div

<div class="header"> 
    <input id="example1" type="submit" name="script" value="Tab 1"> 
    <input id="example2" type="submit" name="script" value="Tab 2"> 
    <input id="example3" type="submit" name="script" value="Tab 3> 
    <input id="example4" type="submit" name="script" value="Tab 4"> 
    <input id="example5" type="submit" name="script" value="Tab 5"> 
    <input id="example6" type="submit" name="script" value="Tab 6"> 
    <input id="example7" type="submit" name="script" value="Tab 7"> 
</div> 
<div id="outputs"> 
    <div id="output1" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output2" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output3" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output4" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output5" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output6" style="height:auto; text-align:left;">Some long text</div> 
    <div id="output7" style="height:auto; text-align:left;">Some long text</div> 
</div>

jQuery代碼是

$("#example1").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("#output1").position().top - 135; 

    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example2").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("#output2").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example3").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("div#output3").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example4").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("div#output4").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example5").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("#output5").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example6").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("#output6").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
}); 
$("#example7").click(function() { 
    $(".single-scroll").removeClass("active"); 
    $(this).addClass("active"); 
    var val = $("#output7").position().top - 89; 
    $("html, body").animate({ 
     scrollTop: val 
    }, 800); 
});

CSS代碼

.active{ 
     color:blue; 
    }

我已經試過上面的代碼，它不是窩正確地做。滾動時不會添加活動類。

header div是固定的。當example1單擊窗口同樣必須滾動到output1，當example2單擊窗口必須滾動到output2，

所有5個按鈕的窗口必須轉移到基於序列號和點擊active類對應的div必須添加到點擊標籤。

同樣，當滾動窗口（不要點擊），如果DIV =輸出4" 的存在，則active類必須添加到example4。

我要尋找的this

來源

2014-09-03 user3883296

它的燒好的類添加http://jsfiddle.net/o0Lcrv3w/9/ – 2014-09-03 07:15:16

它的工作點擊功能，但我不明白如何使用鼠標滾動時獲得相同的功能。當我使用鼠標滾動時，必須將活動類添加到對應於div的按鈕中。檢查鏈接U會明白 – user3883296 2014-09-03 07:23:44

http://jsfiddle.net/o0Lcrv3w/12/ – 2014-09-03 08:01:11

隨着功能相同對於Demo由莫希特，準確DIV對準中心提供，並強調上述標籤。

你需要編輯的jsfiddle代碼如下

if ($(this).offset().top > cutoff+200)

來源

2014-09-03 08:21:31

滾動到一個div並添加活性類到當前的div

回答

相關問題