JS 固定右侧侧边栏案例

àì夳堔傛蜴生んèń 2023-07-06 14:30 11阅读 0赞

1.页面滚动到一定位置.侧边栏改为固定定位.  
2.页面继续滚动,会让返回顶部盒子显示出来.  
![在这里插入图片描述][20200219154328915.gif]

<div class="boxs">
            <div class="boxo">放回顶部</div>
        </div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <script>
            var box1= document.querySelector('.box1');
            var boxs = document.querySelector('.boxs');
            var boxsTop = boxs.offsetTop;
            var box2 = document.querySelector('.box2');
            var box2Top = box2.offsetTop;
            var box3 = document.querySelector('.box3');
            var box3Top = box3.offsetTop;
            var boxo = boxs.querySelector('.boxo');
            //添加页面滚动事件
            document.addEventListener('scroll',function(){ 
                if(window.pageYOffset >= box2Top){ 
                    boxs.style.position = "fixed";
                    boxs.style.top = boxsTop-box2Top +'px';
                }else{ 
                    boxs.style.position = "absolute";
                    boxs.style.top = '600px';
                }
                if(window.pageYOffset >= box3Top ){ 
                    boxo.style.display = "block";
                }else{ 
                    boxo.style.display = "none";
    
                }
            });
        </script>

[20200219154328915.gif]: https://img-blog.csdnimg.cn/20200219154328915.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 134 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 141 阅读

相关 JS 固定右侧侧边栏案例

1.页面滚动到一定位置.侧边栏改为固定定位. 2.页面继续滚动,会让返回顶部盒子显示出来. ![在这里插入图片描述][20200219154328915.gif]

àì夳堔傛蜴生んèń/ 2023年07月06日 14:30/ 0 赞/ 12 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 54 阅读

相关 js实现侧边栏拖动宽度伸缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

淩亂°似流年/ 2023年06月26日 10:52/ 0 赞/ 8 阅读

相关【侧边栏-手风琴效果-js实现】Js实现侧边栏-手风琴效果-带选择小箭头

【Js实现侧边栏-手风琴效果-带选择小箭头】效果展示： ![20201015205231485.png][]![20201015205253749.png][]!

曾经终败给现在/ 2022年12月15日 08:35/ 0 赞/ 218 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 343 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 400 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 708 阅读

相关手风琴导航栏侧边-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

朴灿烈づ我的快乐病毒、/ 2021年06月22日 15:36/ 0 赞/ 652 阅读