2

所以我在这里有一些代码可以将导航栏捕捉到屏幕顶部，我有两个小问题。

第一个是它不适用于IE9，第二个是当按住滚动条滚动时，当它到达要发生动作的点时，它会将滚动条捕捉到屏幕顶部并锁定它，直到您取消单击。

$(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;
    }
});

这是对 jQuery LESS页面上使用的代码的改编，所以我猜它与 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;
        }
    });
});

这是相关的 CSS，它使用 LESS 和 Bootstrap：

@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 处。

4

0 回答 0