使用onepage_scroll插件时,在JQuery中获取滚动位置
Get scroll position in JQuery when using onepage_scroll plugin
我正在为一个网站使用很棒的onepage_scroll插件。低于设定的阈值,页面将恢复到正常滚动行为。然而,在这一点上,当我尝试使用scrollTop()来获取离页面顶部的距离时,它总是返回0。
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
我还尝试了以下两种方法:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();
看看onepage_scroll是如何工作的,它并没有以典型的方式移动主体或div。所以scrollTop不是这里的解决方案。
它正在以下有问题的div上使用translate3d。。。
<div class="main onepage-wrapper">
随着插件的运行,有了以下修改后的样式。。。
-webkit-transform: translate3d(0px, -100%, 0px);
这个答案可能对你有用。。。是否获取div的translate3d值?
要知道节的当前索引:
var nCurSect = $("section.active", ".main").data("index");
然后你可以把它乘以屏幕高度,得到偏移量。
相关文章:
- 使用jQuery获取Dropzone实例/对象
- 如何使用javascript/jquery获取iframe的URL的锚点属性
- 使用Javascript/JQuery获取JSON GET数据
- jQuery获取父元素并将其隐藏
- JavaScript/jQuery-获取当前元素的跨度值
- 使用 jquery 获取外部父 UL
- 当两个单独的单词被放在目标上时,使用Jquery获取一个值
- 如何使用jquery获取Json的节点
- 使用 jQuery 获取样式属性值
- JQuery获取隐藏字段的值
- 使用jQuery获取Facebook视频ID
- 使用jQuery获取第N个元素的数据属性值
- Jquery获取请求Uri太长
- jQuery:获取点击的按钮值
- 如何通过javascript或jquery获取下一行列
- 根据列表元素的值使用JQuery获取列表元素
- 使用jQuery获取选择列表中每个更改的值
- 使用jQuery获取用户坐标
- jquery获取多个选择框的值作为数组
- 如何使用JavaScript/JQuery获取下拉列表的选定值