使用jQuery在当前位置和滚动位置之间的差异 [英] Difference between current position and scrolled position with jQuery

问题描述

我试图在滚动后从顶部到下一个位置的当前距离之间得到区别。事实上，我正在尝试根据距离选择动画持续时间。我编写了下面的代码，但它无法正常工作 -

I'm trying to get difference between current distance of element from the top and its next position after scrolling. In fact I'm trying to choose animation duration depending on its distance. I wrote the code below but it's not work correctly-

我有 6 菜单项，当我点击每个菜单项时，窗口滚动到它的位置。但问题是，当我点击最后一个项目时，它应该在 3000px 2秒中移动，我希望通过获取距离来增加时间。不幸的是，当我添加 if - else if 部分时，某些项目不起作用。我的意思是点击之后没有任何事情发生。

I have 6 menu items, which when I clicked on each one, the window scrolled to its position. But the matter is when I click on the last one item it should move over 3000px in 2 second that I want to increase the time by getting the distance. Unfortunately when I add the if - else if section some of items don't work. I meant after clicking on them nothing happened.

var w = window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;

 var h = window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;


var scrolingMenuTime=1500;
var hashTagActive = "";
    $(".item, .item-f").click(function (ev) {
        if(hashTagActive != this.hash) {
            ev.preventDefault();
            var next = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                next = $(document).height() - $(window).height();
            } else {
                next = $(this.hash).offset().top;
            }
            var currentPosition=$(this).offset().top;
            var diffPos=Math.abs(next-currentPosition);

        if (diffPos >= h && diffPos < 2*h){
            scrolingMenuTime=1700;
        }else if(diffPos >= 2*h && diffPos < 3*h){
            scrolingMenuTime=2500;
        }else if(diffPost >= 3*h && diffPos < 4*h){
            scrolingMenuTime=3500;
        }else if(diffPos >= 4*h && diffPos < 5*h){
            scrolingMenuTime=4500;
        }else if(diffPos >= 5*h){
            scrolingMenuTime=5500;}
        else{
                return false;
            }
        $('html,body').animate({
            scrollTop: next
        }, scrolingMenuTime, 'easeOutBack');
        hashTagActive = this.hash;
        location.hash = '';
    }
});

当我删除 if - else if时我也必须告诉我部分然后代码正常工作。 有什么问题 - 如果部分？

And also I have to tell that when I delete the if - else if section then the code works correctly. What is the wrong with if - else if section?

推荐答案

你基本上需要有某种因素来将其值乘以某个垂直值，即：具有6个大约3000px文档高度的链接意味着你需要使它使得当前位置和目标位置之间的距离越大，越多这个因素将是远距离的动画周期更长。

You basically need to have some kind of a factor to multiply its value by some certain vertical value, i.e: having 6 links with around 3000px document height means you need to make it so that the more distance between current position and target position is, the more this factor will be to have longer animation period for far distance.

就像在这个 JS小提琴

Like in this JS Fiddle

我的解决方案是，如果您使用链接点（第二节） 2 ）已激活，如果您点击（ 3 ）定位第三节，则动画持续时间将为 Math.abs（2 - 3）* 250 所以滚动将持续 250ms 。

My solution was if you're on "Section TWO" with the link dot (2) activated, if you click on (3) targeting "Section THREE", the animation duration will be Math.abs(2 - 3) * 250 so the scrolling will last for 250ms.

如果你在第二节（ 2 ）并点击了li nk（ 5 ）将页面滚动到Section FIVE，公式将为 Math.abs（2 - 5）* 250 会产生 750毫秒 动画持续时间。

While if you're on "Section TWO" (2) and clicked on link (5) to scroll the page to "Section FIVE", the formula will be Math.abs(2 - 5) * 250 which results a 750ms animation duration.

此解决方案自动化代码少得多，不像 if-else if 语句，你需要为每个新的部分添加新的条件。即使您的部分高度变化很大，您也可以使用javascript获得每个部分的高度并构建您自己的类似公式。

This solution automated and much less code, unlike if-else if statements which you need to add new condition for every new section. even if your sections varies a lot in height you can get each section height with javascript and compose your own similar formula.

JS：

// initializing 
var prevLinkId = 0,
    body = $('html, body');

/* some code */

// get the numeric part of the linkId of the anchor that just been clicked
// remove the active .highlight class name from all links
// and assign it to the just clicked link
linkId = $(this).attr('id');
linkId = linkId.replace('lnk', '');
links.removeClass('highlight');
$(links[linkId]).addClass('highlight');

// compute the absolute differet between the previous link value and the new one
// to have a variable factor when multiplied by the step "here 250ms" we get
// longer durations for larger distances, then we perform the scrolling
// below is the part responsible for making flexible durations
diff = Math.abs(linkId - prevLinkId);
timeDelay = diff * 250;
distance = index * secHeight;
body.animate({scrollTop: distance} , timeDelay);

//finally set the just clicked link as previous link for future calculations
prevLinkId = linkId;

这篇关于使用jQuery在当前位置和滚动位置之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！