Home >Web Front-end >JS Tutorial >jQuery implements Baidu Tieba head fixed navigation effect_jquery

jQuery implements Baidu Tieba head fixed navigation effect_jquery

WBOYOriginal: 2016-05-16 15:46:181308browse

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implementation of drop-down box image selection function example_jqueryNext article：jQuery implementation of drop-down box image selection function example_jquery

See more

jQuery implements Baidu Tieba head fixed navigation effect_jquery

Related articles