侧边栏的使用

最新推荐文章于 2023-12-23 23:46:51 发布

IC-ic.ic

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量1.1k

点赞数

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_55743273/article/details/122228575

版权

这篇博客介绍了网页侧边栏的设计与JavaScript实现。主要内容包括布局和样式设计，其中布局涉及固定在页面右下方的返回顶部按钮，初始隐藏，当页面滚动到一定距离时显示。样式设计部分讨论了按钮的样式。JS效果实现部分详细说明了如何通过JS控制，当页面下拉900像素时显示返回顶部按钮，否则保持隐藏。

摘要由CSDN通过智能技术生成

前言

侧边栏是一个网页中比较常见的部件。一般当网页下拉到一个距离时，会弹出一个返回顶部的按钮，在返回顶部时会隐藏这个按钮。

一、布局和样式设计

在页面的右下方固定一个盒子，盒子内容为
布局：

<div class="quick">
        <a href="" class="onck">
            <div class="icon">
                <img src="img/small/navigation.png" alt="">
                <img src="img/small/navigationhover.png" alt="" class="ximian">
            </div>
            <span>手机APP</span>
            <div class="duochu">
                <img src="img/logo/wx1.png" alt="">
                <span>扫码领取新<br>人百元礼包</span>
            </div>
        </a>
        <a href="">
            <div class