【问题标题】:Error with marginTop of stickUP JQuery PluginStickUP JQuery插件的marginTop错误
【发布时间】:2015-08-16 07:49:31
【问题描述】:

我正在使用stickUp Jquery。 http://lirancohen.github.io/stickUp/

问题是当您单击菜单项时,它具有不同的行为。 如果您在主导航之前,它会在之前停止一些像素,而不是在主导航之后。

查看问题。 http://elliakou.5gbfree.com/UPDATED-July-spin/index6.html

  1. 在到达主导航之前,单击菜单项“关于”。
  2. 再次尝试单击菜单项“关于”,并注意位置已更改。这是我想在第一种情况下修复的正确位置。

代码:

jQuery(function ($) {
    $(document).ready(function () {
        var contentButton = [];
        var contentTop = [];
        var content = [];
        var lastScrollTop = 0;
        var scrollDir = '';
        var itemClass = '';
        var itemHover = '';
        var menuSize = null;
        var stickyHeight = 0;
        var stickyMarginB = 0;
        var currentMarginT = 0;
        var topMargin = 0;
        $(window).scroll(function (event) {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                scrollDir = 'down';
            } else {
                scrollDir = 'up';
            }
            lastScrollTop = st;
        });
        $.fn.stickUp = function (options) {
            $(this).addClass('stuckMenu');
            var objn = 0;
            if (options != null) {
                for (var o in options.parts) {
                    if (options.parts.hasOwnProperty(o)) {
                        content[objn] = options.parts[objn];
                        objn++;
                    }
                }
                if (objn == 0) {
                    console.log('error:needs arguments');
                }
                itemClass = options.itemClass;
                itemHover = options.itemHover;
                if (options.topMargin != null) {
                    if (options.topMargin == 'auto') {
                        topMargin = parseInt($('.stuckMenu').css('margin-top'));
                    } else {
                        if (isNaN(options.topMargin) && options.topMargin.search("px") > 0) {
                            topMargin = parseInt(options.topMargin.replace("px", ""));
                        } else if (!isNaN(parseInt(options.topMargin))) {
                            topMargin = parseInt(options.topMargin);
                        } else {
                            console.log("incorrect argument, ignored.");
                            topMargin = 0;
                        }
                    }
                } else {
                    topMargin = 0;
                }
                menuSize = $('.' + itemClass).size();
            }
            stickyHeight = parseInt($(this).height());
            stickyMarginB = parseInt($(this).css('margin-bottom'));
            currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));
            vartop = parseInt($(this).offset().top);
        };
        $(document).on('scroll', function () {
            varscroll = parseInt($(document).scrollTop());
            if (menuSize != null) {
                for (var i = 0; i < menuSize; i++) {
                    contentTop[i] = $('#' + content[i] + '').offset().top;

                    function bottomView(i) {
                        contentView = $('#' + content[i] + '').height() * .4;
                        testView = contentTop[i] - contentView;
                        if (varscroll > testView) {
                            $('.' + itemClass).removeClass(itemHover);
                            $('.' + itemClass + ':eq(' + i + ')').addClass(itemHover);
                        } else if (varscroll < 50) {
                            $('.' + itemClass).removeClass(itemHover);
                            $('.' + itemClass + ':eq(0)').addClass(itemHover);
                        }
                    }
                    if (scrollDir == 'down' && varscroll > contentTop[i] - 50 && varscroll < contentTop[i] + 50) {
                        $('.' + itemClass).removeClass(itemHover);
                        $('.' + itemClass + ':eq(' + i + ')').addClass(itemHover);
                    }
                    if (scrollDir == 'up') {
                        bottomView(i);
                    }
                }
            }
            if (vartop < varscroll + topMargin) {
                $('.stuckMenu').addClass('isStuck');
                $('.stuckMenu').next().closest('div').css({
                    'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px'
                }, 10);
                $('.stuckMenu').css("position", "fixed");
                $('.isStuck').css({
                    top: '0px'
                }, 10, function () {});
            };
            if (varscroll + topMargin < vartop) {
                $('.stuckMenu').removeClass('isStuck');
                $('.stuckMenu').next().closest('div').css({
                    'margin-top': currentMarginT + 'px'
                }, 10);
                $('.stuckMenu').css("position", "relative");
            };
        });
    });
});

【问题讨论】:

    标签: jquery navigation fixed sticky


    【解决方案1】:

    我真的会为此制作一个简单的 jQuery 代码,并为内部链接制作一个 平滑滚动

    $(function () {
      var h1Offset = $("h1").offset().top;
      $(window).scroll(function () {
        if ($(window).scrollTop() > h1Offset)
          $("body").addClass("fixed");
        else
          $("body").removeClass("fixed");
      });
      $("h1 a").click(function (event) {
        event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
          scrollTop: $($anchor.attr('href')).offset().top - $("h1").outerHeight() - 10
        }, 1500);
      });
    });
    * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
    
    body {}
    a {text-decoration: none; color: #99f;}
    p, h1, h2 {margin: 0 0 15px;}
    h1 {font-size: 1.5em; font-weight: 600;}
    p {text-align: justify;}
    p:first-child {margin-top: 15px;}
    .wrap {width: 90%; margin: auto;}
    body.fixed {padding-top: 40px;}
    body.fixed h1 {position: fixed; top: 0; background-color: #fff; left: 0; width: 90%; padding: 0 5%;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="wrap">
      <p>This is a page with a sticky header.</p>
      <p>The heading comes only in the bottom and then sticks to the top.</p>
      <p>It does have section references.</p>
      <h1>The Heading - <a href="#about">About</a> &bull; <a href="#contact">Contact</a></h1>
      <p>Let's have some running or ruining text for the page.</p>
      <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
      <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
      <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
      <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
      <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
      <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
      <h2 id="about">About</h2>
      <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
      <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
      <h2 id="contact">Contact</h2>
      <p>Microsoft Corporation /ˈmaɪkrɵsɒːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer web browser. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
      <p>Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
      <p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
    </div>

    【讨论】:

      猜你喜欢
      • 2011-04-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-05
      相关资源
      最近更新 更多