原生js实现导航栏吸顶

实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶。

话不多说了,代码如下:

window.onscroll = function () {
      var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的垂直偏移
      if (scrollT > xx) {  //xx为临界的垂直位移值
        //修改导航栏的样式,让他呈现吸顶的状态  主要是position:fixed;
      } else {
        //删除吸顶的样式,恢复正常的样式
      }
    };

是不是十分的简单,快去试试吧!

原文地址:https://www.cnblogs.com/xinsir/p/10310636.html

时间: 2024-11-01 19:00:49

原生js实现导航栏吸顶的相关文章

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码:

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码: &

js实现导航栏的吸顶操作

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css&

2017-3-30 Js实现导航栏,选项卡,图片轮播的制作

(一)导航栏的制作 显示的效果: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&quo

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

在UWP中页面滑动导航栏置顶

最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms-uap的文章,淘宝的实现方式是改变顶部显示栏的大小,我本来准备按照他那个思路去做的,但发现效果不理想,在滑动的时候,底部的界面也跟着在滑动,这样使得很不友好,所以我准备自己实现一个 先上个最终效果图吧,图比较大,请耐心等待 思路大概是这样的 将这个界面分为两行 <Grid.RowDefinitio

JS自适应导航栏,菜单栏

1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href="css/common.min.css"> <link rel="stylesheet" href="css/okayNav.min.css"> 3.引入两个JS样式 <script src="https://code

导航栏置顶固定悬浮

<!doctype html><html><head><meta charset="utf-8"><title>网友分享jQuery导航菜单悬浮置顶特效</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,