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?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?