首页 > 其他分享 >jQuery CSS 浏览器滚动到顶部固定左侧栏

jQuery CSS 浏览器滚动到顶部固定左侧栏

时间:2024-09-05 15:06:00浏览次数:5  
标签:jQuery 浏览器 2024925 顶部 var scrollTop div CSS leftNav

 

 

 

<script>
    $(document).ready(function() {
    var div = $('#leftNav_2024925'); // 替换为你的 div 的 ID
    var divTop = div.offset().top; // 获取 div 顶部的位置

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop(); // 获取当前滚动条的位置
        if (scrollTop >= divTop) {
            div.css({'position':'fixed','top':'0','z-index':'99'}); // 当滚动到 div 顶部时,设置 div 为固定定位
            $('#leftNav_2024925_hidden').show()
        } else {
            div.css('position', ''); // 当滚动不到 div 顶部时,恢复 div 的定位
            $('#leftNav_2024925_hidden').hide()
        }
    });
});

 

标签:jQuery,浏览器,2024925,顶部,var,scrollTop,div,CSS,leftNav
From: https://www.cnblogs.com/hechunfeng/p/18398452

相关文章

  • 跨域——应对浏览器同源策略的一种方案
    理解跨域,首先需要理解同源策略(Sameoriginpolicy)。何为源?如图所示,Scheme+DomainName+Port所组成的部分被浏览器视为源,显然https://www.baidu.com:80和https://www.jd.com:80就不是同一个源,两者之间的DomainName发生了变化简而言之,(协议、域名、端口)其中任意一项......
  • Web大学生网页作业成品——游戏阴阳师介绍网页设计与实现(HTML+CSS)(4个页面)
    ......
  • Web大学生网页作业成品——杭州西湖景点网页设计与实现(HTML+CSS)(3个页面)
    ......
  • 清理浏览器浏览历史
    建立bat文件,内容:@echooffecho正在清理浏览器历史记录...::Chrome/Chromiumecho清理Chrome/Chromium历史记录...RunDll32.exeInetCpl.cpl,ClearMyTracksByProcess255::Firefoxecho清理Firefox历史记录...::注意:Firefox的浏览历史清理方式可能不同,通......
  • Chrome 浏览器插件获取网页 window 对象(方案三)
    前言最近有个需求,是在浏览器插件中获取window对象下的某个数据,当时觉得很简单,和document一样,直接通过嵌入content_scripts直接获取,然后使用sendMessage发送数据到插件就行了,结果发现不是这样滴...在这里不推荐使用runtime.executeScript进行注入,很可能会报错:Refus......
  • 浏览器串口助手插件,web版本串口调试助手浏览器插件 Web Serial Online 发布
    WebSerialOnline:串口调试的新时代在数字化不断进步的今天,开发者和工程师面对单片机如ESP8266、ESP32以及RS485设备的调试任务时,往往需要便捷而高效的工具。我们最近推出的浏览器插件——WebSerialOnline,旨在简化这一流程,提供一个无缝且直观的解决方案。即插即用的高效工具......
  • 前端开发学习——CSS定位
    一、定位的基本介绍1、网页常见的布局方式1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况 2、定位的常见......
  • 大二第一个月计划以及html,css初步
    1.当我学习完成java的面向对象之后,准备自学一部分前端的知识即css,html这两个前端的基础技术,在第一个月到下个月四号争取将课程学到4/5.打算在下个月可以开到mysql2.初步了解html这是一种标签语言用来搭建浏览器界面,可以插入文字,图片,音频,视屏.3.下载了vscode,和使用浏览器......
  • CSS学习8[重点]
    盒子模型一、网页布局二、盒子边框(box-border)三、内边距(padding)四、外边距(margin)五、外边距合并一、网页布局CSS三大模块:盒子,浮动,定位。盒子模型是把html中每个元素看成一个矩形的盒子。每个矩形由元素内容、边距、边框组成。二、盒子边框(box-border)常用......
  • CSS学习12
    清除浮动前言一、清除浮动的本质二、清除浮动的方法前言为什么要清除浮动?浮动不占用原文档流的位置,可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动,清除浮动后造成的影响。一、清除浮动的本质为了解决父级元素<html> <head> <style> *{ pa......