js学习笔记（吸顶、侧边广告、返回顶部）

最新推荐文章于 2021-10-16 16:53:08 发布
最新推荐文章于 2021-10-16 16:53:08 发布
阅读量316 收藏 2
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawanhjiao/article/details/105633434
版权

案例1：中部导航吸顶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吸顶</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        img{
            vertical-align: top;
            width: 100%;
        }
        section{
            width: 70%;
            margin: 0 auto;
        }
        .nav{
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<header id="head">
    <img src="image/top.png">
</header>
<nav id="nav">    <!-- <nav> 标签定义导航链接的部分-->
    <img src="image/nav.png">
</nav>
<section>      <!--   <section> 标签定义了文档的某个区域-->
    <img src="image/body01.png">
    <img src="image/body02.png">
</section>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function () {
        //需要吸顶的东西距离网页顶部的高度
        var Height = Tool.$('nav').offsetTop;
        //监听页面滚动
        window.addEventListener('scroll',function () {
            var Sheight = Tool.scroll().top;
            //判断
            if (Sheight >= Height ){
                Tool.$('nav').className = 'nav';
            }
            else {
                Tool.$('nav').className = '';
            }
        })
    })
</script>
</body>
</html>

案例2：侧边广告

广告触顶之后就会弹回原位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边广告</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        #aside{
            width: 100px;
            position: absolute;
            left: 0;
            top: 150px;
        }
        #aside img{
            width: 100%;
        }
        p{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--广告触顶之后就会弹回原位-->
<div id="aside">
    <img src="image/float.jpg">
</div>
<div>
    <p>上课</p>  <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p>  <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p><p>上课</p><p>上课</p><p>上课</p><p>上课</p>
    <p>上课</p> <p>上课</p><p>上课</p><p>上课</p><p>上课</p>
</div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function () {
        var Height = Tool.$('aside').offsetTop;
        var begin = 0, end = 0, ding = null;
        window.addEventListener('scroll',function () {
            clearInterval(ding);
            var Sheight = Tool.scroll().top;
            end = Height + Sheight;
            ding = setInterval(function () {
                begin += (end - begin) * 0.2;
                Tool.$('aside').style.top = begin + 'px';
                if (Math.round(begin) === end){
                    clearInterval(ding);
                }
            },20)
        })
    })
</script>
</body>
</html>

案例3：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: #CCCCCC;
        }
        p{
            text-align: center;
            line-height: 40px;
        }
        #top{
            width: 43px;
            height: 43px;
            background: url("image/top(1).png") no-repeat;
            background-size: 100% 100%;
            position: fixed;
            right: 10px;
            bottom: 30px;
            display: none;
        }
    </style>
</head>
<body>
<span id="top"></span>
<div>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
    <p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p><p>今天天气很好</p>
</div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var scroll = 0;//滚动高度
        var begin = 0, end = 0, ding = null;
        var top = Tool.$('top');
        window.addEventListener('scroll',function (ev1) {
            scroll = Tool.scroll().top;
            if (scroll > 0){
                top.style.display = 'block';
            }
            else {
                top.style.display = 'none';
            }
            begin = scroll;
        });
        //监听top的点击,做缓动动画
        Tool.$('top').addEventListener('click',function (ev) {
            clearInterval(ding);
            ding = setInterval(function () {
                begin += (end - begin) * 0.2;
                scrollTo(0,begin);//回到顶部
                // 再一次清除定时器,不清会出错
                if (Math.round(begin) === end){
                    clearInterval(ding);
                }
            },20)

        })
    })
</script>
</body>
</html>
甜甜今天学了吗
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯js实现页面返回顶部的动画(超简单)
10-19
下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js实现移动端吸顶效果
10-15
在移动设备上，吸顶效果（Sticky Header）是一种常见的用户体验设计，它使得页面的头部元素（如导航栏）在用户滚动页面时始终保持在屏幕顶部，以便用户在浏览页面内容时能快速访问导航链接。本篇文章将详细介绍如何...
侧边广告
weixin_33856370的博客
05-16 368
　　在逛网站我们可能都会看到靠近网页右边的中间位置有个小广告,不管我们向上还是向下滑动页面它都始终垂直居中。最简单的方式是用固定定位。 　　先来布局(为了让滚动条出现强行给个2000px的高。。。。。。) <body style="height:2000px"> <div id="div1"></div> </body> ...
原生JS：侧边栏返回顶部，缓动动画
qq_52900794的博客
10-16 258
CSS: .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: red; } .w { width: 1200px; margin: 10px auto; /* top和bottom left和right */ }
侧边小广告
mumu42的博客
09-01 268
侧边的小广告随页面的滚动而滚动
侧边广告栏编写
平步青云的博客
07-31 358
&lt;head&gt; &lt;style type="text/css"&gt; .ad { float: right; position: fixed; right: 20px; top: 200px; border: 1px solid ; width: 200px; height: 500px; border-radi...
js实现导航吸顶效果
10-20
本文主要分享了js实现导航吸顶效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
JS实现吸顶特效
10-15
在网页设计中，吸顶（Sticky）特效是一种常见的交互设计手法，它使得特定元素（如导航栏）在用户滚动页面时始终保持在屏幕顶部可见。本文将深入探讨如何使用JavaScript来实现这一效果，并分析其中涉及的关键知识点。...
原生js实现吸顶效果
10-20
在网页设计中，"吸顶效果"是一种常见的用户体验优化技巧，它使得某个元素在页面滚动时始终保持在屏幕顶部，直到用户滚动到特定位置后才恢复原位。这种效果通常用于固定导航栏，以便用户在浏览长页面时可以方便地访问...
JS实现网站吸顶条
10-15
JS实现网站吸顶条是一种常见的网页交互设计，主要用于在用户滚动页面时保持某些元素（如导航栏或通知栏）始终固定在屏幕顶部，提供持续的可视性和可访问性。这种效果在现代网页设计中广泛应用，能够提升用户体验，使...
js实现多个标题吸顶效果
10-15
主要为大家详细介绍了js实现多个标题吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现带有动画的返回顶部
11-19
本文实例为大家分享了js实现带有动画返回顶部的具体代码，供大家参考，具体内容如下 1、滑动鼠标往下滑动，侧边栏跟着往上移动，当到达某一个位置的时候，侧边栏停止移动；鼠标往上，则侧边栏往下-停止 2、当鼠标继续下滑到某一个位置，“返回顶部”几个字会弹出此处如果点击“返回顶部”，则立刻到了顶部 3、到达顶部位置效果 4、源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
JS技术实现动态置顶、置底、上移、下移
08-07
使用JS技术实现数据行的动态置顶、置底、上移、下移
[前端插件] js返回顶部 效果实现
晴天天天蓝
11-16 292
需要 jQuery参考 http://www.jb51.net/article/48203.htmcss: #goTop{ position:absolute; display:none; width:50px; height:48px; background:#fff url(static/img/gotop.png) no-repeat 16px 1...
web页面浮动回到顶部功能和浮动广告
weixin_33946605的博客
12-30 277
实现测试浮动回到顶部 法一：用js实现&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BackToTopTwo.aspx.cs" Inherits="PracticeCollectionTwo.BackToTopTwo" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD
实例：侧边栏弹性滚动广告
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-31 539
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; body{margin: 0;padding:0;position: relative;bac
web前端-js-回到顶部&侧边栏出现
lin875859873的博客
11-06 198
// 回到顶部 function goTo(div, top) { var top = parseInt(div.offset().top) - (top || 0); $('html,body').animate({ scrollTop: (0, top) }, 800); window.ev...
360浏览器广告太多怎么办_广告太多怎么办？拦截电脑广告的几种方法
weixin_39668470的博客
11-22 647
广告，现代营销的重要手段,生活中无孔不入的广告,大到街边宣传单、贴纸，满天的广告让人不胜其烦！实体广告我们可以选择忽视！但电脑广告就严重影响电脑的正常使用及安全。面对烦人的广告，我们怎么办呢？ 电脑上的广告来源于各种应用软件推送广告及网站flash广告、js广告等等，下面我们分别看看应对办法。一、电脑各种弹窗广告拦截 在安装各种应用软件时，软件本身都带有弹窗广告，各种推送信息占据了我们的大半个屏幕...
淘宝顶部header的居中布局
u011280778的博客
06-29 1911
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
吸顶div不覆盖顶部div
最新发布
04-04
可以通过设置吸顶div的z-index属性，使其比顶部div的层级低，从而避免覆盖。例如： ```css #top { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #ccc; z-index: 100; } #sticky { position: sticky; top: 50px; height: 30px; background-color: #f00; z-index: 50; } ``` 在以上示例中，顶部div的z-index为100，吸顶div的z-index为50，因此吸顶div不会覆盖顶部div。注意，设置z-index属性只有在元素的position属性为fixed、absolute或relative时才有效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值