导航页面头部固定

//绑定需要浮动的表头
$(function () {
    $("#floatHead").smartFloat();
});

//智能浮动层函数
$.fn.smartFloat = function () {
    var position = function (element) {
        var top = element.position().top;
        var pos = element.css("position");
        $(window).scroll(function () {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });
                } else {
                    element.css({
                        top: scrolls
                    });
                }
            } else {
                element.css({
                    position: pos,
                    top: top
                });
            }
        });
    };
    return $(this).each(function () {
        position($(this));
    });
};

 其中floatHead 就是要固定的top导航,如果要让导航一直在最上方,div要加上z-index属性,让它值大点,style="z-index: 100"

时间: 2024-10-17 22:29:58

导航页面头部固定的相关文章

滑动页面,顶部导航or顶部 固定在一个位置

现在很多页面 特别是电商用的比较多 比如电商里面某个商品的详细页 往下拉页面 当滚轮到达一定位置的时候  导航栏即固定在顶部 其实他的原理很简单, 就是一开始设置导航为相对定位,然后计算出滚动条离顶部的值 当大于这个值的时候 定位变成相对浏览器定位 top为0即可 js代码如下 具体html css 代码 有空再写了 $(window).scroll(function(){ var y = window.scrollY;//754到达 if(y > 754){ $("#mynav"

百度地图导航算路成功但是无法进入导航页面

百度地图导航算路成功但是无法进入导航页面Warning: Attempt to present <UINavigationController: 0x163852800> on <UIViewCont 在导航页面.m中增加 -(id)naviPresentedViewController { return self; }

页面头部title、description、keywords标签的优化

页面头部优化 <Head></Head>中间的区域中间的区域,我们称为网页的头部.在网页的头部中,通常存放一些介绍页面内容的信息,例如页面标题.描述及关键字等等. 在头部优化中,除了要清理垃圾代码外,最重要的还有拟写title.description及keywords标签的内容. 标题标签<title>的优化: 标题标签也称为标题标签,标题标签内容是对网页主题的概括,相当于一片文章的题目.标题标签的优化是网站优化中最重要的内容之一,对页面相关性产生决定性的影响.大多数搜

滑动ListView自动隐藏页面头部和底部元素的例子

完整工程代码在这:https://github.com/NashLegend/Auto-Hide-ListView 现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+.在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐藏头尾元素,以显示更多内容,当列表向下滑动的时候,再将头尾元素拉出来.比如Google+. 刚刚进入时是这个样子: 再把列表身上一拉,头尾隐藏,成了这个样子: 再往下拉,就会再变回第一

站内优化之页面头部代码规范化的重要性

头部代码非常重要!错一点都会导致百度抓取出现故障说到代码就要谈到模板了,我相信非常多的人也好,企业也好,做的站点都是复制别人的代码居多,这就产生一个问题,模板代码严重相似,特别是经过2013年年底泛站群攻击以后,百度立既改变了算法,把大量相似的代码站点例入垃圾站,这给一些小站点造成非常大的麻烦,每天更新,发外链,比别人复出一倍,排名却仍然停留不前,你有想过能否从本文找到一些原因吗,假设能给你一些启示,也不浪费我的文笔了. 一个页面的代码,头部非常重要,可是这里指的头部并非我们在源码中看到的hea

如何将导航栏始终固定在窗口顶部

如何将导航栏始终固定在窗口顶部:在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.

ios 导航页面

//  AppDelegate.m#import "AppDelegate.h"#import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

头部固定的table

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>头部固定table</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验

cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色 StatusBar.backgroundColorByHexString('#11c1f3')://设置数值类型 StatusBar.backgroundColorByName("white"); //设置名称类型 可以去参考 StatusBar插件的js源代码,里面很多设置方法. var namedColors = {    "black