Web Front-end
JS Tutorial
Example code for div to be fixed at the top when scrolling to the top of the page_javascript skills
Example code for div to be fixed at the top when scrolling to the top of the page_javascript skills
May 16, 2016 pm 05:33 PMThis example uses Javascript to fix the DIV at the top when it reaches the top when scrolling the page. The effect is a bit flashy under IE, the effect URL: http://www.keleyi.com/keleyi/phtml/fixdiv.htm
The following is the code:
<body style="margin:0px;">
<div style="height:300px;background:#e0e0e0"></div>
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%;"><ul> <li><a
href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li>
<li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li>
<li> ;<a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li>
<li><a href ="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li>
<li><a href="http:/ /www.keleyi.com/menu/other/" target="_blank">Other</a></li>
<li><a href="http://www.keleyi .com/" target="_blank">Homepage</a></li></ul>
</div>
<div style="height:2600px;background: #999"></div>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $(' #fixedMenu_keleyi_com'), st;
dv.attr('otop', dv.offset().top); //Storage the original distance from the top
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6 ) {//IE6 does not support the fixed attribute, so this effect can only be achieved by setting position to absolute and top
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position' ) != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement scrolling to a specified element position in JavaScript?
Oct 22, 2023 am 08:12 AM
How to implement scrolling to a specified element position in JavaScript?
HTML, CSS, and jQuery: Make an auto-scrolling bulletin board
Oct 27, 2023 pm 06:31 PM
HTML, CSS, and jQuery: Make an auto-scrolling bulletin board
How to use JavaScript to achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page?
Oct 27, 2023 pm 06:30 PM
How to use JavaScript to achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page?
How to implement scrolling switching effect of images in JavaScript?
Oct 20, 2023 pm 05:51 PM
How to implement scrolling switching effect of images in JavaScript?
How to implement full screen scrolling effect in Vue
Nov 08, 2023 am 08:42 AM
How to implement full screen scrolling effect in Vue
How to achieve smooth scrolling to the bottom button with CSS
Nov 21, 2023 pm 05:11 PM
How to achieve smooth scrolling to the bottom button with CSS
How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position?
Oct 19, 2023 am 09:46 AM
How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position?
