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)
現在表示されているスライドに「選択された」クラスを割り当てるために必要な変更は何ですか