3

Bootstrap の scrollspy を正常に使用していますが、宛先アンカーが水平方向にカスケードするページで使用したいと考えています。私は無駄に微調整しましたが、それを機能させることができません。https://gist.github.com/marcoleong/1922743も試しましたが、成功しませんでした。

への呼び出しで動作するhttp://jsfiddle.net/AzSWV/2/で私のフィドルを参照してください$('body').scrollspy();

最初に、垂直スクロールスパイが機能することがわかります。CSS のコメントを外し、フィドルを更新して水平レイアウトを表示します。

4

3 に答える 3

-1

この最小限の垂直スクロールスパイから参照を取得することにより、スクロールスパイメソッドに組み込まれたブートストラップを使用せずにこれを行うことができました: http://jsfiddle.net/mekwall/up4nu/

あなたの[実際の]コードを見なければ、あなたのために値を変更することはできませんが、これで作業するのはそれほど難しいことではありません:

$(document).ready(function(){
    var lastId;
    //change this selector to the section containing your menu items
    var pickerMenu = $("#sliderInner");
    var menuItems = pickerMenu.find("a");
    //finds the anchors to be linked to
    var scrollItems = menuItems.map(function(){
        var item = $($(this).attr("href"));
        if(item.length){ return item; }
    });

    //if you are scrolling the body rather than an overflow div change #main to body
    $('#main').scroll(function(){
        var currentItem = scrollItems.map(function(){
            //currently uses center of the screen as active location
            //feel free to place the $(window) section with 0 to go from left
            //or remove the the /2 to have from the right
            if($(this).offset().left < ($(window).width()/2)){
                return this;
            }
        });
        currentItem = currentItem[currentItem.length - 1];

        var id = currentItem && currentItem.length ? currentItem[0].id : "";
        if (lastId !== id) {
            lastId = id;

        //adds the class 'active' to the parent of the link
        menuItems
            .parent().removeClass("active")
            .end().filter("[href=#"+id+"]").parent().addClass("active");
        }
    });
    //set first item to active
    menuItems.first().parent().addClass("active");
});

編集: テスト データhttp://jsfiddle.net/AzSWV/12/を使用して、リクエストに応じてフィドルを更新しました

EDIT2:左にスクロールする便利なスクロールダウンを含めることをお勧めします.. https://github.com/brandonaaron/jquery-mousewheelで Brandon Aaron の jQuery Mousewheel プラグインをチェックアウトし、これと組み合わせてください:

$("#main").mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 50);
    e.preventDefault();
});
于 2013-04-07T05:31:12.387 に答える