如何根据页面滚动动态更改 id

How to dynamically change id based on page scrolling

本文关键字：动态 id 滚动 何根      更新时间：2023-09-26

我有一个简单的页面，有 3 个大部分（蓝色、红色和灰色），并修复了定位的向上和向下箭头。小提琴

目前，当我单击向下箭头时，它会

拖动/滚动到底部灰色部分，当我单击向上箭头时，它会转到顶部蓝色部分。到目前为止，这很好。但我想让它更有活力。

这是否可以使：如果我单击向下/向上箭头，它只会滚动到下一个底部/上部。

场景 1：我在蓝色部分，单击向下箭头将移动到红色部分，再次单击向下箭头将滚动到灰色部分

场景 2：如果我鼠标滚动到红色部分并单击向下箭头，它将滚动到灰色部分

向上箭头相同。

主要思想是在单击任何向上或向下箭头时根据当前位置滚动到下一部分。

我真的是一个完全的初学者，可以为此编写任何jQuery/javaScripts。我什至不确定jQuery是否可以做到这一点。

提前感谢您的任何帮助。

.HTML

<div class='container'>
    <div class='div1' id='position1'></div>
    <div class='div2' id='position2'></div>
    <div class='div3' id='position3'></div>
    <div class='move-down'><a href='#position3'>v</a></div>
    <div class='move-up'><a href='#position1'>^</a></div>
</div>

我最近做了类似的事情，但是使用鼠标滚轮，使其适应您的按钮需求应该没有问题。

这是滚动显示的小提琴

这是代码：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    function transitionTo(elem){
        $('html, body').stop().animate({
            scrollTop: $(elem).offset().top
        }, 2000, function ()  {
            flag = true;
            flag1 = true;
            flag2 = true;
        });
    }
    function getDelta(e){
        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        return evt.detail ? evt.detail*(-40) : evt.wheelDelta;
    }
    var flag = true;
    $('#position1').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);
        if(delta < 0 && flag == true)
        {
            flag = false;
            transitionTo('#position2');
        }
    });
    var flag1 = true;
    $('#position2').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);
        if(delta < 0 && flag1 == true)
        {
            flag1 = false;
            transitionTo('#position3');
        }
        else if (delta > 0 && flag1 == true) {
            flag1 = false;
            transitionTo('#position1');
        }
    });
    var flag2 = true;
    $('#position3').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);
        if(delta < 0)
        {

        }
        else if (delta > 0 && flag2 == true) {
            flag2 = false;
            transitionTo('#position2');
        }
    });

要让您的按钮与相同的过渡进行交互，请在下面添加以下内容：

$('#position1').on('mouseover', function () {
    var position = 1;
    $('.move-down').on('click',function(e){
            e.preventDefault();
            transitionTo('#position2');
        });
});
$('#position2').on('mouseover',function () {
    var position = 2;
    $('.move-down').on('click',function(e){
            e.preventDefault();
            transitionTo('#position3');
        });
    $('.move-up').on('click',function(e){
            e.preventDefault();
            transitionTo('#position1');
        });
});
$('#position3').on('mouseover',function () {
     var position = 3;
    $('.move-up').on('click',function(e){
            e.preventDefault();
            transitionTo('#position2');
        });
});

只需找到当前的div 并相应地重写底部的函数......

相关文章：