Question

拥有以下HTML代码

<head>
    <title>onepage scroll</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no"/>
    <link href="css/test.css" rel="stylesheet" type="text/css"/>  
</head>

<body>

    <section class="container">
        <nav class="test-nav">
            <a href="#" id="sc-head">Home</a> 
            <a href="#section_1" id="c1">Section 1</a>
            <a href="#section_2" id="c2">Section 2</a>
            <a href="#section_3" id="c3">Section 3</a>
            <a href="#section_4" id="c4">Section 4</a>
            <a href="#section_5" id="c5">Section 5</a>
            <a href="#section_6" id="c6">Section 6</a>
        </nav>

        <section class="sc sc-head"> 
            <div class="sc-content">
                <p>onepage scroll top content </p>      
            </div>
        </section>

        <section class="sc c1">
            <div class="sc-content">
                <p>Content 1</p>
            </div>
        </section>

        <section class="sc c2">
            <div class="sc-content">
                <p>Content 2</p>
            </div>
        </section>

        <section class="sc c3">
            <div class="sc-content">
                <p>Content 3</p>
            </div>
        </section>

        <section class="sc c4">
            <div class="sc-content">
                <p>Content 4</p>
            </div>
        </section>

        <section class="sc c5">
            <div class="sc-content">
                <p>Content 5</p>
            </div>
        </section>


        <section class="sc c6">
            <div class="sc-content">
                <p>Content 6</p>
            </div>
        </section>

    </section>

    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <script type="text/javascript"  src="js/scroll.js"></script>
    <script type="text/javascript">
        jQuery('.test-nav').scroll({'scrollSpeed' : 1000});
    </script>
</body>

现在scroll.js

(function($, window, document, undefined) { 
    $.fn.op_scroll = function( options ) {
        $(this).addClass('op-scroller');
        var settings   = $.extend({'scrollSpeed '  : 500}, options);
        var optionLocs = new Array();
        var lastScrollTop = 0;
        var menuHeight    = $(".op-scroller").height();  
        var scroller_head = '.op-scroller';


        $(window).load(function() {
            if( window.location.hash == "")
                setTimeout(function() { window.scrollTo(0, 1) }, 100);
            else
                $("a[href='"+window.location.hash+"']").trigger('click');
        });

        return $(scroller_head + ' a').each( function(index) {

            if ( settings.scrollSpeed ) {
                var scrollSpeed = settings.scrollSpeed
            }

            var element = $(this);
            var id = element.attr("id");
            optionLocs.push(Array($("."+id).position().top-menuHeight, $("."+id).height()+$("."+id).position().top, id));

            var stickyTop = $('.op-scroller').offset().top;   console.log(stickyTop);
            var stickyMenu = function(direction){
                var scrollTop = $(window).scrollTop(); 
                if (scrollTop > stickyTop) { 
                    $(scroller_head).css({ 'position': 'fixed', 'top':0 }).addClass('fxd'); 

                } else {
                    $(scroller_head).css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); 
                } 

                if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){ 
                    var currnt_id = "#"+id;
                    if(direction == "up"  &&  typeof optionLocs[index+1] != "undefined" ){
                        $(currnt_id).addClass("active");
                        $("#"+optionLocs[index+1][2]).removeClass("active");
                        $(".op-scroller a").removeClass("active");
                        $('#'+id).addClass("active");                           

                    } else if(index > 0  && typeof  optionLocs[index-1] != "undefined") {
                        $(currnt_id).addClass("active");
                        $("#"+optionLocs[index-1][2]).removeClass("active");
                    } else if(direction == undefined){
                        $(currnt_id).addClass("active");
                    }
                }
            };
            stickyMenu("");
            $(window).scroll(function() {
                var st = $(this).scrollTop();
                if (st > lastScrollTop) {
                    direction = "down";
                } else if (st < lastScrollTop ){
                    direction = "up";
                }
                lastScrollTop = st;
                stickyMenu(direction);

                if($(window).scrollTop() + $(window).height() == $(document).height()) {
                    $('.op-scroller a').removeClass('active');
                    $('.op-scroller a').last().addClass('active');
                }
            });

            $(this).on('click', function(e){
                var selectorHeight = $(scroller_head).height();
                e.preventDefault();
                var id = $(this).attr('id');
                if ($(this).hasClass("op-scroller-disable"))
                {
                    return false;
                }

                var goTo =  $('.'+ id).offset().top -selectorHeight;
                $("html, body").animate({ scrollTop: goTo }, scrollSpeed);
                hash = $(this).attr("href");
                if(hash == "#") hash = ''; else $(scroller_head).css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
                // alert(hash);
                window.location.hash = hash;
                // window.location.hash = $(this).html().charAt(0).toUpperCase() + $(this).html().slice(1);
            }); 
        });
    }

})(jQuery, window, document);

我正在尝试使用给定的js进行一页滚动。当我将它作为单独的示例使用时，它按预期工作。

在以下行

中将此js与Magento集成时遇到问题

var stickyTop = $('.op-scroller').offset().top;   
console.log(stickyTop); // It gives each 'a' offset top position instead of first one(<a href="#" id="sc-head">Home</a>).

我怀疑使用prototype.js库。请提供建议

Answer 1

由于Magento使用Prototype。这里可能会发生冲突。所以尝试像这样包装你的jQuery代码：

jQuery(document).ready(function( $ ) {
     // Your jQuery code using $ here
});

在Magento上使用offset（）。top？

1 个答案: