jQuery and CSS3 realize the navigation menu with fixed top position and floating effect in the imitation petal network-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery and CSS3 realize the navigation menu with fixed top position and floating effect in the imitation petal network

不言

Jun 25, 2018 pm 04:44 PM

css3jqueryNavigation menulevitate

This article mainly introduces the jQuery CSS3 implementation of a navigation menu with a fixed top position and a floating effect imitating the petal network. It can realize the function of the navigation bar being horizontally suspended and fixed at the top after the page slides down. It involves jQuery event response and page elements. For operating tips related to dynamic modification of attributes, friends in need can refer to the following

This article describes the example of jQuery CSS3 implementing a navigation menu with a fixed top position and a floating effect imitating the petal network. Share it with everyone for your reference, the details are 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 charset="UTF-8">
<title>【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单</title>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
 var nav=$(".nav");
 $(window).scroll(function(){
 if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
  nav.addClass("nav_scroll");
 }else{
  nav.removeClass("nav_scroll");
 }
 });
})
</script>
</head>
<body>
<p id="header"><h1 id="花瓣">花瓣</h1></p>
<p class="nav">
  <ul>
    <li><a>关注</a></li>
    <li><a>最新</a></li>
    <li><a>最热</a></li>
    <li><a>视频</a></li>
    <li><a>家居</a></li>
    <li><a>旅行</a></li>
  </ul>
</p>
<p style="background:#f9f9f9;color:#000;" id="cont">
  <h2 id="">1</h2>
  <h2 id="">2</h2>
  <h2 id="">3</h2>
  <h2 id="">4</h2>
  <h2 id="">5</h2>
  <h2 id="">6</h2>
  <h2 id="">7</h2>
  <h2 id="">8</h2>
  <h2 id="">1</h2>
  <h2 id="">2</h2>
  <h2 id="">3</h2>
  <h2 id="">4</h2>
  <h2 id="">5</h2>
  <h2 id="">6</h2>
  <h2 id="">7</h2>
  <h2 id="">8</h2>
  <h2 id="">1</h2>
  <h2 id="">2</h2>
  <h2 id="">3</h2>
  <h2 id="">4</h2>
  <h2 id="">5</h2>
  <h2 id="">6</h2>
  <h2 id="">7</h2>
  <h2 id="">8</h2>
  <h2 id="">1</h2>
  <h2 id="">2</h2>
  <h2 id="">3</h2>
  <h2 id="">4</h2>
  <h2 id="">5</h2>
  <h2 id="">6</h2>
  <h2 id="">7</h2>
  <h2 id="">8</h2>
  <h2 id="">1</h2>
  <h2 id="">2</h2>
  <h2 id="">3</h2>
  <h2 id="">4</h2>
  <h2 id="">5</h2>
  <h2 id="">6</h2>
  <h2 id="">7</h2>
  <h2 id="">8</h2>
</p>
</body>
</html>

The operation effect diagram is as follows:

and above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

jQuery, html5 and css3 implement the function of rounded corner non-refresh form with input validation

JavaScript And the code of how to draw a little person in html5 canvas

The above is the detailed content of jQuery and CSS3 realize the navigation menu with fixed top position and floating effect in the imitation petal network. For more information, please follow other related articles on the PHP Chinese website!

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