JS 实现DIV 滚动至顶部后固定

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>DIV滚动至顶部后固定</title>
</head>
<body style="height:2000px;">
<div style="height: 200px"></div>
<div id="nav_keleyi_com" style="position:relative;top:0;background:#00f;width:100px; height:100px">
  Test Div
</div>
<script type="text/javascript">
  function menuFixed(id) {
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;

    window.onscroll = function () {
      changePos(id, _getHeight);
    }
  }

  function changePos(id, height) {
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop < height) {
      obj.style.position = ‘relative‘;
    } else {
      obj.style.position = ‘fixed‘;
    }
  }
  window.onload = function () {
    menuFixed(‘nav_keleyi_com‘);
  }
</script>
</body>

原文地址:https://www.cnblogs.com/acm-bingzi/p/div-fixed.html

时间: 2024-07-28 23:23:31

JS 实现DIV 滚动至顶部后固定的相关文章

菜单滚动至顶部后固定

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>菜单滚动至顶部后固定-柯乐义</title><style type="text/css">.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}.header{height:150px

当导航条滚动到顶部时固定到顶部

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <!-- js引用包 --> 6 <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> 7 8 <style> 9 html,body,div,span,applet,object,ifram

js实例--js滚动条缓慢滚动到顶部

收集篇(已测)-- <html><head> <script type="text/javascript"> var currentPosition,timer; var speed=10; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scro

div滚动到页面顶端后固定住(转)

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

div滚动到页面顶端后固定住

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

一款基于jquery滑动后固定于顶部的导航

之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1> Scroll down</h1> <h2> And watch the menu bar</h2> <nav id="menu"> <h1 id="site

JS实现 网页下拉一段后固定导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js平滑滚动到顶部,底部,指定地方

文章出自:http://www.daixiaorui.com/read/92.html 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 示例演示地址:http://www.daixiaorui.com/Public/demo/js/scroll.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

滚动到顶部固定

1 // 滚动到顶部固定 2 var navH = $(".fixedTop").offset().top; 3 $(".fixedTop").wrap("<div class='background-fixed'></div>"); 4 $('.flowDev').scroll(function () { 5 var scroH = $('.flowDev').scrollTop(); 6 if (scroH >=