js控制导航滚动

通过js获取视口高度，当超过高度时改变position的值为fixed，html在相应标签加入id= "float"

/** * Created by 刘吴江 on 2018/5/1. */window.onload=    function(){        var oDiv = document.getElementById("float"),            H = 0,            Y = oDiv        while (Y) {H += Y.offsetTop; Y = Y.offsetParent}        window.onscroll = function()        {            var s = document.body.scrollTop || document.documentElement.scrollTop            if(s>H) {                oDiv.style = "position:fixed;top:0;"            } else {                oDiv.style = ""            }        }    }

原文地址：https://www.cnblogs.com/liuwujiang/p/8978019.html

时间： 2024-10-13 20:47:02

js控制导航滚动的相关文章

js 控制导航各个内容区域

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.10.2.min.js"></script>//自己导入一个jquery包就可以直接用,否则实现不了效果报错 <style type="text/css">

function aa(i){ var tm = setInterval(function(){ var t = $(window).scrollTop(); var d = i < t ? Math.min((i-t)/10, -1) : Math.max((i-t)/10, 1) $(window).scrollTop( t + d ); if($(window).scrollTop()==i)clearInterval(tm); },30) } js控制网页滚动条往下滚动

Js控制网页滑动的时候顶部导航条变成半透明实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">  <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <title>Js控制网页滑动的时候顶部导航条变

jquery.fullPage.js全屏滚动插件

效果演示网站 http://www.51xuediannao.com/demo.php 插件下载 http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

可控制导航下拉方向的jQuery下拉菜单代码

效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base ta

JS控制滚动条的位置

控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight) JS控制TextArea滚动条自动滚动到最下部 document.getElementByIdx_x('textarea').scrollTop = document.getElementByIdx_x('textarea').scrollHeight

js手机号批量滚动抽奖代码实现

我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始令下,大屏幕上的手机号就会快速随机滚动,当主持人一声停令下,大屏幕上会随机出现几个停止滚动的手机号,这种手机号批量随机滚动的效果,就是我们今天要实现的效果.注意,在这个效果的实现当中最核心的就是随机和不重复. 下面,我就简单来介绍一下原理:1.随机,我们要写一个随机数,而且这个随机数不能重复,这个不

JS控制百度滚动条

JS控制滚动条的位置:window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0);竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight) JS控制TextArea滚动条自动滚动到最下部 document.getElementById('textarea').scrollTop = document.getElementById('textarea').scrollHeight 例子: import or

控制导航条最后一个标签样式的三种方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>控制导航条最后一个标签样式的三种方法</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script> <style> .nav{