1

localscroll と scrollto を介して、水平方向のスライド ページ ( Environment ) を作成し、URL にハッシュも追加します。例: localScroll からナビゲーションのリンクをクリックすると、URL にハッシュが追加されます (index.html#media)。

現在、Localscroll を介してアクティブなリンクのサポートはありません。それを追加したかったので、ここでいくつかの解決策を見つけました: Stackoverflow

私は満足しましたが、ページをリロードしようとしましたが、ユーザーがメディア セクションなどにいる場合、URL の認識がサポートされておらず、選択したクラスが現在選択されているナビゲーション リンクに追加されません。 URL。

だから私はさらに調査を行い、そのサイトを見つけました:ウェブサイト

素晴らしいですが、私の水平セットアップではうまくいきませんでした。私はJavaScriptについての知識をほとんど始めず、jqueryの方法もまったく知らないので、ロジックでスクリプトを変更して、これまでに行きました:

クラスを追加します。マウスホイールでスクロールしても、すべてのナビゲーション リンクにクラスがうまく追加されます。しかし、それはそれらを削除しません。

<script style="text/javascript">
    $(function(){
        var sections = {},
            _width   = $(window).width(),
            i        = 0;

        // Grab positions of our sections 
        $('.section').each(function(){
            sections[this.name] = $(this).offset().left;
        });

        $(document).scroll(function(){
            var $this = $(this),
                pos   = $this.scrollLeft();

            for(i in sections){
                if(sections[i] > pos && sections[i] < pos + _width){
                    $('#nav ul li a').removeClass('selected');
                    $('#nav_' + i).addClass('selected');
                }  
            }
        });
    });

    $(".scroll").click(function(event){
        event.preventDefault();
        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.left;
        $('html, body').animate({scrollLeft:target_top}, 800);
    });
</script>

選択したクラスを削除するようにリンクを更新する方法は?

編集:私は近いと思います。forヘッダーを変更する必要があると思います

if(sections[i] > pos && sections[i] < pos + _width)

現在表示されているスライドに「選択された」クラスを割り当てるために必要な変更は何ですか

4

0 に答える 0