2

ここに、ナビゲーション バーを画面の上部にスナップするコードがいくつかありますが、2 つの小さな問題があります。

1 つ目は、IE9 では機能しないことです。2 つ目は、スクロールバーをクリックしたままスクロールすると、アクションが発生するポイントに到達すると、スクロールバーが画面の上部にスナップされ、クリックを解除するまでロックします。

$(window).on('scroll', function() {
    if (!docked && init < body.scrollTop() ) {
        nav_menu.addClass('docked').css({
            top: 0,
            position: 'fixed'
        });
        docked = true;
    }
    else if (docked && body.scrollTop() <= init) {
        nav_menu.removeClass('docked').css({
            position: 'absolute',
            top: init + 'px'
        });
        docked = false;
    }
});

これは、 LESSページで使用されているコードを jQuery に適応させたものなので、jQuery が関数を処理する方法に関係があると思いますが、気になります。

編集：関連するHTMLは次のとおりです

    <header>
        <section id="top-picture"><img alt="Logo" src="img/top.png" /></section>
        <nav id="nav-menu">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="artists.php">Artists</a></li>
                <li><a href="artwork.php">Artwork</a></li>
                <li><a href="music.php">Music</a></li>
                <li><a href="download.php">Download</a></li>
            </ul>
            <ul>
            <!-- Social Media section
                Facebook Like button -->
                <li><div class="fb-like" data-href="urlhere" data-send="false" data-layout="button_count" 
                data-width="90" data-show-faces="false"></div></li>
                <!-- Tweet button -->
                <li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="horizontal" 
                data-url="urlhere" data-via="user" data-related="user" data-text="text">Tweet</a></li>
            </ul>
        </nav>
    </header>

関連する完全なJSは次のとおりです

jQuery(document).ready(function($){
    var nav_menu = $('#nav-menu');
    var body = $('body');
    var init = nav_menu.position().top;
    var docked = false;

    $(window).on('scroll', function() {
        if (!docked && init < body.scrollTop() ) {
            nav_menu.addClass('docked').css({
                top: 0,
                position: 'fixed'
            });
            docked = true;
        }
        else if (docked && body.scrollTop() <= init) {
            nav_menu.removeClass('docked').css({
                position: 'absolute',
                top: init + 'px'
            });
            docked = false;
        }
    });
});

LESS と Bootstrap を使用する関連 CSS は次のとおりです。

@import "colors"; // importing preset color list
@import "bootstrap";

@linkColor: lighten(@Maroon, 5%);

/* Structure */

body {
  background: @Black;
  z-index: 1;
}

section#top-picture {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  z-index: 300;
}

header {
  nav#nav-menu {
    background: @Black;
    position: absolute;
    top: 176px;
    width: 100%;
    border: 1px inset lighten(@Black, 30%);
    box-shadow: 0 0 15px 5px @White inset;
    -moz-box-shadow:  0 0 15px 0px @White inset;
    -webkit-box-shadow:  0 0 15px 0px @White inset;
    z-index: 500;
    ul {
      list-style-type: none;
      text-align: center;
      li {
        display: inline;
      }
      &:first-child {
        padding-top: 1%;
        li {
          padding: 2.5%;
          a {
            .anchor-button;
            .btn-large;
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
          }
        }
      }
      &:last-child {
        li {
          margin: 0 5%;
        }
      }
    }
  }
}

section#top-picture にある navbar の上にある画像があります。

4

0 に答える 0