基于scroll的吸顶效果

本次要实现的是一种常见的网页效果,如下:

页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下所示:

我们分三步实现上面的效果。

首先是页面的基础结构,为了简化操作,将头部、导航部分和主体内容部分全部用图片表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none
        }
        img{
            vertical-align: top;
            width: 100%;
        }

        section{
            width: 70%;
            margin: 0 auto;
        }

    </style>
</head>
<body>
   <header id="head">
       <img src="images/top.png" alt="">
   </header>
   <nav id="nav">
       <img src="images/nav.png" alt="">
   </nav>
   <section>
       <img src="images/body01.png" alt="">
       <img src="images/body02.png" alt="">
   </section>
</body>
</html>

此时,一个基本的页面效果已经出来了,我们再来做一个提前准备,就是监听滚动事件,所以需要用到上一篇所封装的方法和之前用的根据id获取元素方法:

<script>
    function scroll() {
        if(window.pageYOffset !== null){
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        }else if(document.compatMode === "CSS1Compat"){ // W3C
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }else{
            return {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            }
        }
    }
    function $(id) {
      return typeof id === "string" ? document.getElementById(id) : null;
  }</script>

至此,所有的准备都完成了,我们再来分析理想的效果:当浏览器发生滚动时,页面向上卷起,直到顶部完全卷起,即浏览器的卷起部分等于导航部分最初距离顶部边缘的距离,此时,吸顶的部分即导航部分位于浏览器顶部,继续滚动时,主体部分发生了滚动,但导航部分的位置不再发生变化:

1,找到临界位置,卷起高度==初始化时导航部分距离浏览器顶部的高度

2,赋予导航部分吸顶效果:position:fixed

3,卷起高度变大时,继续吸顶,卷起高度变小时,取消吸顶

根据上面的分析,我们前面的基础上继续完善代码:

<style>
        .nav{
            position: fixed;
            left: 0;
            top:0;
            width: 100%;
        }

   </style>

<script>
    window.onload = function () {
        // 1. 求出offsetHeight
        var nav_top_height = $("nav").offsetTop;

        // 2. 监听窗口滚动
        window.onscroll = function () {
            var scroll_top_height = scroll().top;
            console.log(scroll_top_height);

            // 2.1 判断
            if(scroll_top_height >= nav_top_height){
                 $("nav").className = "nav";
            }else {
                $("nav").className = "";
            }
        }
    }
</script>

这样,简易的吸顶效果就实现了,完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border:none
        }
        img{
            vertical-align: top;
            width: 100%;
        }

        section{
            width: 70%;
            margin: 0 auto;
        }

        .nav{
            position: fixed;
            left: 0;
            top:0;
            width: 100%;
        }

    </style>
</head>
<body>
   <header id="head">
       <img src="images/top.png" alt="">
   </header>
   <nav id="nav">
       <img src="images/nav.png" alt="">
   </nav>
   <section>
       <img src="images/body01.png" alt="">
       <img src="images/body02.png" alt="">
   </section>

<script>
    function scroll() {
        if(window.pageYOffset !== null){
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        }else if(document.compatMode === "CSS1Compat"){ // W3C
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }else{
            return {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            }
        }
    }
    function $(id) {
      return typeof id === "string" ? document.getElementById(id) : null;
  }
    window.onload = function () {
        // 1. 求出offsetHeight
        var nav_top_height = $("nav").offsetTop;

        // 2. 监听窗口滚动
        window.onscroll = function () {
            var scroll_top_height = scroll().top;
            console.log(scroll_top_height);

            // 2.1 判断
            if(scroll_top_height >= nav_top_height){
                 $("nav").className = "nav";
            }else {
                $("nav").className = "";
            }
        }
    }
</script>
</body>
</html>

完整详细代码下载:点这里

原文地址:https://www.cnblogs.com/yuyujuan/p/9657721.html

时间: 2024-11-06 07:12:19

基于scroll的吸顶效果的相关文章

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1.移动端 我们通常采用三段式进行布局的  例如 <div class="container">    <header></header><main></main><fotter&g

Vue开发——实现吸顶效果

因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还是挺简单的,因为在css中我们可以设置一个元素的position: fixed;,这样它就可以固定在那里,这样不管页面怎么滚动,它的位置都不受影响,所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了.但是这个合适的时机是什么时候呢,这就需要我们计算了,我们

代码:jquery 吸顶 效果

(只是个简单吸顶效果,还需完善) 吸顶: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll( function() { var m =$(document).scrollTop(); console.log(

吸顶效果插件

function Topfixed(options){ var opts = $.extend({ id:'#topFixed', fixedClass:'top-fixed' },options); var fixed = $(opts.id);//获取吸顶目标ID对象 var marginBottom = parseInt(fixed.css('marginBottom')) || 0;//吸顶目标的下边距 //var blank = document.createElement('div'

5行js代码搞定导航吸顶效果

一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); }

JQ实现吸顶效果代码

吸顶下过代码跟简单几行代码就可以了 如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){ $(window).scroll(function(){ if($(window).scrollTop()>100){ $(".nav").css({"position":"fixed","top":0,"background":"red","wid

纯CSS实现吸顶效果

position的属性有哪些? {  position: static;  position: relative;  position: absolute;  position: fixed; position: inherit;  position: initial;  position: unset; } 还有一个position的属性值:position: sticky: position: sticky:粘性定位,是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位

支付宝小程序滚动监听吸顶效果

axml部分 <view class=" {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view> axss部分 .fixed{position: fixed; top: 0; } js部分 Page({ data: { menuFixed:"", }, // 监听页面滚动距离scrollTop onPageScroll: function(e) { var that = thi

移动端吸顶(iOS与安卓)

有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有iOS和android两种样式,如下: /*!*Android*!*/ .head { position: fixed; top: 0; left: 0; z-index: 5; } /*!*iOS*!*/ .head{ position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 5; } 设置之后你会发现只有ios手机的吸顶效果OK了,android