0

横にスクロールする Web サイトを開発しており、固定位置を使用してメニューを上に保持していましたが、下にスクロールするとメニューも下にスクロールすることに気付きました。横にスクロールしたときにメニューを一番上に保つ方法があるのだろうかと思っていますが、下にスクロールしても下に行きません。

そのため、ボディに対する絶対位置を使用してみましたが、横スクロール時にメニューが一番上に表示されません。

#menu
{   
background          : url(images/banner5.gif) no-repeat;
height              : 60px;
margin-top          : 20px;
position            : absolute; 
left                : 450px;
}

#menuFloat li
{   
display             : inline;
float               : left; 
padding             : 8px 20px 0px 30px;
}

#menuFloat li a
{   
    color               : #9d0c10;
    font-family         : Erato;
    font-size           : 12pt;
    font-style          : italic;
    text-decoration     : none; 
}

$(document).ready(function() {
 $("#menuFloat a").bind("click",function(event){ event.preventDefault();
  var target = $(this).attr("href");
   $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop:    $(target).offset().top }, 1200);
 }); }); 

<div id="menu">
    <ul id="menuFloat">
        <li><a class="nav1" href="#nav1">Home</a></li>
        <li><a class="nav2" href="#nav2">About Us</a></li>
        <li><a class="nav3" href="#nav3">Members</a></li>
        <li><a class="nav4" href="#nav4">Events</a></li>
        <li><a class="nav5" href="#nav5">Media</a></li>
        <li><a class="nav6" href="#nav6">Contact Us</a></li>    
    </ul>
</div>

最初の部分はメニューの CSS、2 番目の部分は水平方向にスライドするための jquery コード、3 番目の部分はメニューの html です。

私の問題について混乱している場合は、ここを確認してください: http://permika-montreal.tk/new.php 下にスクロールすると、メニューにも同じことが表示されます。

4

2 に答える 2

2

leftこれは、ユーザーが JavaScript/jQuery を使用して水平方向にスクロールするたびに CSS プロパティを更新することで実現できます。

参照: https://stackoverflow.com/a/9423822/1718121

$(window).scroll(function(event) {
  var x = $(this).scrollLeft();
  $("#menu").css("left", x + offset); //Change offset to be the default margin-left of your menu.
}
于 2013-02-02T23:05:57.913 に答える
1

ここを見て

#menu
{   
background          : url(images/banner5.gif) no-repeat;
height              : 60px;
top                 : 20px;
position            : absolute; 
left                : 50px;
}

Jクエリ

$(document).ready(function(){

 var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('scroll x');
        lastScrollLeft = documentScrollLeft;
        $("#menu").css("left", lastScrollLeft+50);

    }
});   

});
于 2013-02-02T23:36:56.163 に答える