visualNav

A jQuery plugin that modifies a navigation menu to highlight / change when the menu's target smooth scrolls into view

Github星跟踪图

Features

  • Smooth scrolling page navigation.
  • Easing can easily be defined for both horizontal and vertical scrolling.
  • Auto-updating menu which highlights both the currently viewed content & other content in view.
  • User can cancel auto-scroll by pressing any key, clicking on the page or scrolling the mousewheel.
  • Can be set up to work with any menu elements. Integrates easily with Bootstrap!
  • Location hash updates as you scroll through the page (v2.4.2).

Demos

Documentation

  • Moved to the Wiki pages.
  • For more details, see my blog entry or check out any of the demo pages source.

Dependencies

  • jQuery 1.3+ (required)
  • jQuery easing plugin (optional); jQuery 1.4 required for special easing.

Licensing

  • MIT License for all versions.
  • Previously it was dual licensed under MIT and GPL, but now it's just the MIT.

Known Problems & Bugs

  • Doesn't work well in IE7 or IE quirks mode. Probably not in IE6.
  • The menu will not select (or highlight) the item above the last item if they are both very short. For example, if your browser shows three sections while at the bottom of the page. The third to last may have shown for a brief time just before the bottom of the page reached the bottom edge margin. The menu would then skip directly to the last menu item. This is one reason why the bottom margin value is kept a low number (100 pixels by default).
  • Fixed in v2.4.2! If you click on a menu item, the page contents will automatically scroll to that section and update the browser url with that target. But if you manually scroll the page using the scroll bar or mouse, the web page url will not update with the current position. This was done on purpose, because if the script changes the location, the page will jump to that target automatically. This wouldn't look good if you are quickly scrolling through the page as it would make the movement jittery.

Change Log

Version 2.5.2

Version 2.5.1

Version 2.5.0

  • Add offsetTop option - adds a top offset value (pixels) or jQuery element (height is measured), of any top menu or gap.
  • Add scrollOnInit option - prevents initial scroll to top menu item when set to false (default value).
  • General code cleanup
    • Remove some browser specific code.
    • Add event namespacing.
    • Only update hash if changed.
  • Anchors not inside of content blocks are now clickable
    • Previously, any anchor link in the menu would update to show that the ID was in view, but it was not clickable.
    • As before, any anchors within a defined content block (set by the contentClass option) will target the top of the content block.
  • Modified animationTime option to now accept a function
    • The animationTime option still accepts a time in milliseconds.

    • To set an animationTime based on the scroll distance, use any desired calculation method and return a time in milliseconds.

    • For example, in this snippet, the distance is halfed and returned as an animation time in milliseconds:

      animationTime: function( distance ) {
        // distance in pixels; return time in milliseconds
        // 1000 pixels => 500ms; 10000 pixels => 5000ms
        return distance / 2;
      }
      

主要指标

概览
名称与所有者Mottie/visualNav
主编程语言HTML
编程语言HTML (语言数: 3)
平台
许可证
所有者活动
创建于2010-07-09 21:03:43
推送于2017-10-11 21:56:27
最后一次提交2017-10-11 16:56:26
发布数15
最新版本名称v2.5.2 (发布于 )
第一版名称v1.0 (发布于 )
用户参与
星数69
关注者数9
派生数24
提交数55
已启用问题?
问题数7
打开的问题数2
拉请求数4
打开的拉请求数0
关闭的拉请求数3
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?