• jQuery判断页面滚动条距离顶端位置


    今天利用空闲时间,研究了一下浏览器滚动条的简单控制,主要是通过jQuery获取滚动条的位置信息,直接上代码

    1、当前窗口高度

    $(window).height();

    2、滚动条已滚动高度

    $(window).scrollTop();

    3、结合jQuery来实时获取滚动条滚动距离信息

     1 $(window).on('scroll',()=>{
     2         let $fixedheader = $('#topface'); // fixed容器
     3         // console.log(fixedheader);
     4         var wintop=$(window).scrollTop(); // 已滚动卷去的高度
     5         //console.log(wintop);
     6         let winHeight = $(window).height(); // 可视窗口的高度
     7         //console.log(winHeight);
     8         // 卷去一个可视窗口高度后执行
     9         /* if (wintop - winHeight > 0) {
    10             // fixedheader.hide();
    11             $fixedheader.addClass("showtopface");
    12         } else {
    13             // fixedheader.show();
    14             $fixedheader.removeClass("showtopface");
    15         } */
    16         // 当滚动条离顶部100像素时的条件判断和执行动作
    17         if(wintop>100){
    18             // fixedheader.hide();
    19             $fixedheader.addClass("showtopface");
    20         } else {
    21             // fixedheader.show();
    22             $fixedheader.removeClass("showtopface");
    23         }
    24 
    25     })

    通过上边代码,在做前端滚动条的控制时,或者滚动条滚动到离顶部指定位置高度时触发某些动作。我这边是当滚动到离顶部100时,给html标签增加样式showtopface,否则移除html标签样式showtopface

  • 相关阅读:
    cookie.js插件
    cookie.js插件的案例
    解决mysqli的中文乱码问题
    mysqli字符编码
    小人行走的动画案例
    原生js中用Ajax进行get传参
    php操作数据库
    数据库的信息处理
    数据库的dos命令
    面向对象php 接口 抽象类
  • 原文地址:https://www.cnblogs.com/926803/p/11941840.html
Copyright © 2020-2023  润新知