0

トップバー (ブランディング) にスライドを配置し、スライダー (またはバナー) の上下にメニューを配置するスクリプトを作成しました。スクロールして戻ると、ブランディングとメニューだけで、スライダーやバナーはありません。

動作しますが、修正できないバグがあります。

ページには 4 つの主要な要素がありますが、SLIDER または BANNER はオプション要素です (常に存在するとは限りません)。

<div id="branding">BRANDING</div>
<div id="header">
    <div id="slider">SLIDER OR BANNER</div>
    <div id="menu">MENU</div>
</div>
<div id="content">CONTENT</div>

そして、これまでの私のスクリプトは次のとおりです。

     var sticky_navigation = function () {

         $lH = ($('#branding').length) ? $('#branding').height() : 0,
         $sH = ($('#slider').length) ? $('#slider').height() : 0,
         $bH = ($('#banner').length) ? $('#banner').height() : 0,
         $mH = ($('#menu').length) ? $('#menu').height() : 0;

         var $content = $('#content'), // Main content area
             $branding = $('#branding'),
             $header = $('#header'),
             $menu = $('#menu');

         // HEADER
         if ($(window).scrollTop() > $lH) {
             $header.css({
                 marginTop: $lH + "px"
             });
             if ($branding.css('position').toString() != "fixed") {
                 $branding.css({
                     position: "fixed",
                     top: "-" + $lH + "px",
                     left: 0,
                     zIndex: 500,
                 }).animate({
                     top: 0
                 }, 700);
             }
         } else {
             $branding.css({
                 position: "relative",
                 marginTop: "0px",
             });
             $header.css({
                 marginTop: "0px"
             });
         }

         // MENU
         if ($(window).scrollTop() > ($bH + $sH + $mH)) {
             $branding.css({
                 boxShadow: "none",
             });
             $header.css({
                 marginTop: ($lH + $mH) + "px"
             });
             if ($menu.css('position').toString() != "fixed") {
                 $menu.css({
                     position: "fixed",
                     top: "-" + $lH + "px",
                     left: 0,
                     zIndex: 490,
                 }).animate({
                     top: $lH
                 }, 700);
             }
         } else {
             $menu.css({
                 position: "relative",
                 marginTop: "0px",
                 top: 0,
             });
             if ($('#branding').length || $('#slider').length) {
                 $branding.css({
                     boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
                 })
             }
         }
     };
     // run our function on load
     sticky_navigation();

     // and run it again every time you scroll
     $(window).scroll(function () {
         sticky_navigation();
     });

     // and run it again every time you resize
     $(window).resize(function () {
         sticky_navigation();
     });

これは私が今持っているjsfiddleです...バグがすばやく上下にスクロールするのを確認するには..メニューが本来よりも低い位置にあることがわかります。

http://jsfiddle.net/hC423/1/

ここに画像の説明を入力

これに関するヘルプは非常に高く評価されています。これを行うためのより良い方法があれば、提案をお待ちしています。

C

4

1 に答える 1