[英]Using offset().top with Magento?
Have following HTML code 具有以下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>
Now 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);
I am trying to working one page scroll with given js. 我正在尝试使用给定的js进行一页滚动。 It works as expected when i use it as separate example. 当我将其用作单独的示例时,它按预期工作。
Having issue when integrating this js with Magento in following line 在下一行中将此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>).
I suspect with prototype.js library. 我怀疑与prototype.js库。 Kindly advice 好心的建议
Since Magento
used Prototype
. 由于Magento
使用了Prototype
。 There's probably happen a conflict here. 这里可能发生冲突。 So try to wrap your jQuery code like this: 因此,尝试像这样包装您的jQuery代码:
jQuery(document).ready(function( $ ) {
// Your jQuery code using $ here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.