Javascript 使用offset（）。是否使用Magento覆盖？

有以下HTML代码

一页卷轴
一页滚动顶部内容

内容1

内容2

内容3

内容4

内容5

内容6

jQuery（'.test nav'）.scroll（{'scrollSpeed'：1000}）；

现在滚动到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);

（函数（$，窗口，文档，未定义）{
$.fn.op_scroll=功能（选项）{
$（this.addClass（'op-scroller'）；
变量设置=$.extend（{'scrollSpeed'：500}，选项）；
var optionLocs=新数组（）；
var lastScrollTop=0；
var menuHeight=$（“.op scroller”）.height（）；
var scroller_head='.op scroller'；
$（窗口）。加载（函数（）{
if（window.location.hash==“”）
setTimeout（函数（）{window.scrollTo（0，1）}，100）；
其他的
$（“a[href=”“+window.location.hash+””）.trigger（'click'）；
});
返回$（滚动头+a'）。每个（函数（索引）{
if（settings.scrollSpeed）{
var scrollSpeed=设置。scrollSpeed
}
var元素=$（此）；
var id=element.attr（“id”）；
optionLocs.push（数组（$（“+id）.position（）.top菜单高，$（“+id）.height（）+$（“+id）.position（）.top，id））；
var stickyTop=$（'.op scroller'）.offset（）.top；console.log（stickyTop）；
var stickyMenu=功能（方向）{
var scrollTop=$（窗口）.scrollTop（）；
如果（scrollTop>stickyTop）{
$（滚动头）.css（{'position'：'fixed'，'top'：0}）.addClass（'fxd'）；
}否则{
$（滚动头）.css（{'position'：'absolute'，'top'：stickyTop}）.removeClass（'fxd'）；
} 
if（optionLocs[index][0]lastScrollTop）{
方向=“向下”；
}否则如果（st

我正试图与给定的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>).

var stickyTop=$（'.op scroller'）.offset（）.top；
console.log（stickyTop）；//它给出每个“a”偏移顶部位置，而不是第一个（）。

---

我怀疑prototype.js库有问题。由于

Magento

使用了

Prototype

，敬请告知。这里可能会发生冲突。因此，请尝试像这样包装jQuery代码：

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

---

谢谢，我总是使用var jQuery=jQuery.noConflict（）；在jquery库文件的末尾，我使用了var stickyTop=jquery（'.scroll nav'）.offset（）.top；控制台日志（stickyTop）；在这一行之前，返回jQuery（scroller_head+'a'）。每个（函数（索引）…现在都可以了。但不建议这样做：）

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