jQuery implements Baidu Tieba head fixed navigation effect

jQuery implements Baidu Tieba head fixed navigation effect_jquery

WBOY

Release： 2016-05-16 15:46:18

Original

1270 people have browsed it

The example in this article describes how jQuery can imitate the Baidu Tieba head fixed navigation effect. Share it with everyone for your reference. The details are as follows:

Jquery is used here to achieve the effect of fixing the head on the web page, but not scrolling with the scroll bar. The web page special effects were compiled in Baidu Tieba. At the beginning, the fixed bar can be dragged to the top of the web page with the scroll bar, but After reaching the top of the web page, drag the scroll bar again. The head will not scroll, but other content can scroll. It seems to be an effect that has been seen a lot on the Internet.

The screenshot of the running effect is as follows:

The specific code is as follows:

<!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-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){  
 $(window).scroll(function() {
  //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
  if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
  }else{
    $(".nav").removeClass("fixedNav");
  } 
 });
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微软雅黑", "黑体";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body> 
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.