导航栏下拉至一定高度后固定在顶部的特效

<script type="text/javascript">
$(function(){
var nav=$(".nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
  if(sc.scrollTop()>=100){
    nav.addClass("fixednav");
   $(".navTmp").fadeIn();
  }else{
   nav.removeClass("fixednav");
   $(".navTmp").fadeOut();
  }
})
})
</script>
.fixednav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}

原文地址:https://www.cnblogs.com/ccs-mxs/p/8455071.html

时间: 2024-10-10 09:04:20

导航栏下拉至一定高度后固定在顶部的特效的相关文章

NAV导航栏———下拉菜单

利用CSS实现导航栏菜单—下拉菜单. 首先给出HTML下拉菜单布局格式: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 6.5 Drop-Down Menus</title> <link rel="stylesheet" type="text/css&

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

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

Css之导航栏下拉菜单

Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; /*固定在顶部*/ /*position:fixed; top:0; width:100%;*/ } li{ float:left; } li a, .dropbtn { display:inline-block; color:whi

有用的导航栏下拉代码

<!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" xml:lang="en" lang="en"><h

很酷的导航条下拉效果

<style type="text/css"><!--.p9{ font-family: "宋体"; font-size: 9pt; }body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}UNKNOWN { TEXT-DECORATION: none}A:visited { TEXT-DECO

下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)

<!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-Typ

华丽导航CSS下拉菜单特效

华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.huiyi8.com/fengjing/

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

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

React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. HTML部分 相关技术栈:react.antd.react-router.详细的技术栈应用请参考官方文档的使用说明. * 展示主页App.jsx组件代码 import React from 'react'; import './App.css'; import { Link, Route } from 'react-router-dom'; im