模拟a标签的hash---中部导航

melody_lql 发布于2019-08-20 17:29 / 2544人阅读

摘要：主要功能固定中部导航栏滚动到触发滚动后可视内容和高亮标题一致很多网站并未做到这一点点击导航标题快速定位到内容可自定义当触发标题时的标题样式基于实现根据此网站的代码稍作修改使用方式中声明调用例如导航的类是自己文件里按自己意愿定义

主要功能

固定中部导航栏（滚动到触发）

滚动后可视内容和高亮标题一致（很多网站并未做到这一点）

点击导航标题快速定位到内容

可自定义当触发标题时的标题样式

基于JQuery实现

(function() {
  $.fn.smint = function(fxd) {
    var lastScrollTop, menuHeight,
        myOffset, mySelector, optionLocs,
        scrollSpeed, settings, smint, smintA,
        smintH, smintLi;
    settings = $.extend({
      "scrollSpeed": 500,
      "mySelector": "div"
    });
    $(this).addClass("smint");
    optionLocs = new Array;
    lastScrollTop = 0;
    menuHeight = $(".smint").height();
    smint = $(".smint");
    smintLi = $(".smint li");
    smintA = $(".smint a");
    smintH = smintLi || smintA;
    myOffset = smint.height();
    if (settings.scrollSpeed) {
      scrollSpeed = settings.scrollSpeed;
    }
    if (settings.mySelector) {
      mySelector = settings.mySelector;
    }
    return smintH.each(function(index) {
      var id, stickyMenu, stickyTop;
      id = $(this).find("a").attr("href").split("#")[1];
      if (!$(this).hasClass("extLink")) {
        $(this).attr("id", id);
      }
      optionLocs.push(Array($(mySelector + "." + id).position().top - menuHeight, $(mySelector + "." + id).height() + $(mySelector + "." + id).position().top, id));
      stickyTop = smint.offset().top;
      stickyMenu = function(direction) {
        var scrollTop;
        scrollTop = $(window).scrollTop() + myOffset;
        if (scrollTop > stickyTop + myOffset) {
          smint.css({
            "position": "fixed",
            "top": 0
          }).addClass("fxd");
        } else {
          smint.css("position", "relative").removeClass("fxd");
        }
        if (optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]) {
          if (direction === "up") {
            $("#" + id).addClass("active");
            $("#" + optionLocs[index + 1][2]).removeClass("active");
          } else if (index > 0) {
            $("#" + id).addClass("active");
            $("#" + optionLocs[index - 1][2]).removeClass("active");
          } else if (direction === void 0) {
            $("#" + id).addClass("active");
          }
          $.each(optionLocs, function(i) {
            if (id !== optionLocs[i][2]) {
              $("#" + optionLocs[i][2]).removeClass("active");
            }
          });
        }
      };
      stickyMenu();
      $(window).scroll(function() {
        var direction, st;
        st = $(this).scrollTop() + myOffset;
        if ($(window).scrollTop() + $(window).height() === $(document).height()) {
          smintH.removeClass("active");
          $(".smint li:not(".extLink"):last").addClass("active");
        } else {
          smintH.last().removeClass("active");
        }
        if (st > lastScrollTop) {
          direction = "down";
        } else if (st < lastScrollTop) {
          direction = "up";
        }
        lastScrollTop = st;
        stickyMenu(direction);
      });
      $(this).on("click", function(e) {
        var myOffset;
        var goTo, hash;
        myOffset = smint.height();
        e.preventDefault();
        hash = $(this).find("a").attr("href").split("#")[1];
        goTo = $(mySelector + "." + hash).offset().top - myOffset;
        $("html, body").stop().animate({
          scrollTop: goTo
        }, scrollSpeed);
        if ($(this).hasClass("extLink")) {
          return false;
        }
      });
    });
  };
  $.fn.smint.defaults = {
    "scrollSpeed": 500,
    "mySelector": "div"
  };
})(jQuery);

http://www.outyear.co.uk/smint/

根据此网站的代码稍作修改

使用方式

js中声明调用例如导航的类“navbar-wrapper-middle”

$(".navbar-wrapper-middle").smint("fxd")
//fxd是自己css文件里按自己意愿定义好的类
//即导航栏固定后的样式

云服务器 GPU云服务器最快的hash表算法安卓平台的模拟器 js取a标签的id值左右滑动的导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83615.html

基于Vue,Vue-router,Vuex的简书网站模仿

摘要：本文假设读者手里有关于和的文档，并且对和有一定的了解。没有文档也没关系我这里有关于文档以及介绍，可以配合本文进行学习。关键就是在中部导航栏热门，新上榜那块，棕色框内的内容会根据中部导航栏选中不同内容进行改变。在这个教程里面，我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex。本文假设读者手里有关于vue-router和Vuex的文档，并且对Vue-router...

warnerwu 2019-08-29 11:16 评论0 收藏0
基于Vue,Vue-router,Vuex的简书网站模仿

摘要：本文假设读者手里有关于和的文档，并且对和有一定的了解。没有文档也没关系我这里有关于文档以及介绍，可以配合本文进行学习。关键就是在中部导航栏热门，新上榜那块，棕色框内的内容会根据中部导航栏选中不同内容进行改变。在这个教程里面，我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex。本文假设读者手里有关于vue-router和Vuex的文档，并且对Vue-router...

shiyang6017 2019-08-01 15:42 评论0 收藏0
DIV+CSS规范命名大全集合

摘要：网页制作中规范使用命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体命名规则命名大全内容篇。网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容篇。常用DIV+CSS命名大全集合，即CSS命名规则 DIV CSS命名目录我们开发CSS+DIV网页（Xhtml）时候,比较困惑...

wangtdgoodluck 2019-08-30 11:20 评论0 收藏0
twitter-blog-vue中部导航栏布局

摘要：接下来是中部导航栏。我们看到这里的头像动画，和中部导航栏定位都是跟鼠标滚动有关的。这里是要求在页面上部分滚动范围内，导航栏一直在的上部，随着鼠标的滚动而改变位置。而且中部导航栏下方区域的内容，在下滑的时候不能出现在这个区域。接下来是中部导航栏。我们看到这里的头像动画，和中部导航栏定位都是跟鼠标滚动有关的。我们先将布局实现一下。这里是要求在页面上部分滚动范围内，导航栏一直在div的上部...

wanghui 2019-08-02 15:38 评论0 收藏0
vue-router 基础知识点

摘要：路由模块的本质就是建立起和页面之间的映射关系。模式的原理是事件监测值变化，可以在对象上监听这个事件。这两个方法应用于浏览器记录栈，在当前已有的基础之上，它们提供了对历史记录修改的功能。 vue-router 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是...

ningwang 2019-08-26 10:41 评论0 收藏0