编辑：

Question

编辑：

解决

当鼠标滚动到该页面时，我尝试更改输入值。

HTML：

<div class="pagenum">
    Page num: <input type="text" id="pagenum"> / 3
</div>
<div class="page-container">
    <div class="page" id="page-1" data-page-no="1">
        This is div #1
    </div>
    <div class="page" id="page-2" data-page-no="2">
        This is div #2
    </div>
    <div class="page" id="page-3" data-page-no="3">
        This is div #3
    </div>
</div>

CSS：

.page-container{
    padding-top: 30px;
    width: 300px;
    height: 1500px;
}
.page {
    height: 300px;
    border: 1px solid #000;
    margin: 5px;
}
.pagenum {
    background: #fff;
    position: fixed;
    border: 1px solid #000;
    width: 300px;
}

JS：

$(window).scroll(function(event) {
  var pagenum = $('.page').attr('data-page-no');
  $("#pagenum").val(pagenum);
});

但它不能按我的意愿去做。

任何人都可以帮助我？

更多：将数字填入输入框时，我想为该页面设置动画。

感谢您编辑我的帖子。

Answer 1

下面是我使用的jQuery代码：

var disable_scroll = false;
$(window).scroll(function(event) {
    if(disable_scroll == false){
        if($(window).scrollTop() >= $("#page-1").offset().top){
           var pagenum = $("#page-1").attr('data-page-no');
        }
        if($(window).scrollTop() >= $("#page-2").offset().top){
           var pagenum = $("#page-2").attr('data-page-no');
        }
        if($(window).scrollTop() >= $("#page-3").offset().top){
           var pagenum = $("#page-3").attr('data-page-no');
        }
        $("#pagenum").val(pagenum);
    }
});
$("#pagenum").on('input',function(){
    $(".page").each(function(){
        if($(this).attr('data-page-no') == $("#pagenum").val()){
            disable_scroll = true;
            var selected = $(this);
            $('html,body').animate({
                scrollTop: $(this).offset().top + 1
            }, function(){
                var pagenum = $(selected).attr('data-page-no');
                $("#pagenum").val(pagenum);
                disable_scroll = false;
            });
            return;
        }
    });
});

查看此Fiddle ...

Answer 2

试试这个......

$(window).scroll(function(event) { var elem = document.elementFromPoint(50, 100); var pagenum = $(elem).attr("data-page-no"); $(".pagenum > input").val(pagenum); });

Answer 3

var temp=document.getElementById("page-2").getBoundingClientRect();   
    if(temp.top>-50 && temp.top<50)
        $("#pagenum").val(2);
    else
        $("#pagenum").val(1);

使用getBoundingClientRect（）函数获取div相对于视口的位置，并根据值显示页码

我已经为特定div做了它现在你可以使用foreach lop并检查页面上所有div的值并相应地显示页码

滚动到div时，jquery更改输入值

编辑：

3 个答案: