jQuery实现固定顶部 定位滚动导航效果代码

jQuery实现固定顶部 定位滚动导航效果代码,很常见的效果,非常实用;滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示;点击导航文字时平滑跳转到对应的板块。

$(function(){     

    var subNav_active = $(".adv_active");    

    var subNav_scroll = function(target){    

        subNav_active.removeClass   ("adv_active");    

        target.parent().addClass("adv_active");    

        subNav_active = target.parent();    

    };    

    $("#subNav a").click(function(){    

        subNav_scroll($(this));    

        var target = $(this).attr("href");    

        var targetScroll = $(target).offset().top - 80;    

        $("html,body").animate({scrollTop:targetScroll},300);    

        return false;    

    });    

    //页面跳转时定位    

    if(window.location.hash){    

        var targetScroll = $(window.location.hash).offset().top - 80;    

        $("html,body").animate({scrollTop:targetScroll},300);    

    }    

    $(window).scroll(function(){    

        var $this = $(this);    

        var targetTop = $(this).scrollTop();    

        var footerTop = $("#footer").offset().top;    

        var height = $(window).height();    

        if (targetTop >= 520){    

            $("#subNav").addClass("fixedSubNav");    

            $(".empty-placeholder").removeClass("hidden");    

        }else{    

            $("#subNav").removeClass("fixedSubNav");    

            $(".empty-placeholder").addClass("hidden");    

        }    

        if(targetTop < 750){    

            subNav_scroll($(".adv_door"));    

        }else if(targetTop > 1200 && targetTop < 1640){    

                subNav_scroll($(".adv_source"));    

        }else if(targetTop > 2314 && targetTop < 2734){    

                subNav_scroll($(".adv_price"));    

        }else if(targetTop > 2968 && targetTop < 3268){    

                subNav_scroll($(".adv_transfer"));    

        }else if(targetTop > 3327 && targetTop < 3627){    

                subNav_scroll($(".adv_payment"));    

        }else if(targetTop > 3651 && targetTop < 4071){    

                subNav_scroll($(".adv_promise"));    

        }else if(targetTop > 4163 && targetTop < 4473){    

                subNav_scroll($(".adv_ride"));    

        }else if(targetTop > 4580){    

            subNav_scroll($(".adv_finance"));    

        }    

    })    

}());

时间: 2024-12-29 06:40:34

jQuery实现固定顶部 定位滚动导航效果代码的相关文章

基于 jQuery 实现的精致作品集图片导航效果

今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示     下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,

Android界面,固定顶部、底部导航。中间可滑动

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:b

jQuery网页向下滚动导航固定顶部代码

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery网页向下滚动导航固定顶部代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&

25.当屏幕缩小的时候,固定顶部的导航栏的左右滚动

当屏幕缩小的时候,固定顶部的导航栏可以左右滚动 html: <div class="search"> <a href="/index.php" ><img class="search-logo" id="search-logo" src="{$yf_theme_path}public/images/logo.png" ></a>    <div clas

js滚动到指定位置导航栏固定顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; bac

网页定位 - 右侧导航栏效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页定位导航效果</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 body{ 13 font-size: 12px; 14 line-height: 1

js-滚动到指定位置导航栏固定顶部

最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js滚动到指定位置导航栏固定顶部</title> 6 <style type="text/css"> 7 body{height: 2500px; margin:

背景弹性滚动的导航效果

<!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><title>背景弹性滚动的导航效果</title>