Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/StickyBar.md

Last active August 29, 2015 14:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jasesmith/0fd8d5196481c77d512e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jasesmith/0fd8d5196481c77d512e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jasesmith renamed this gist Dec 3, 2014. 1 changed file with 0 additions and 0 deletions.
    0 readme.md → StickyBar.md
    View file
    File renamed without changes.
  2. jasesmith renamed this gist Oct 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 readme.markdown → readme.md
    View file
    File renamed without changes.
  3. jasesmith renamed this gist Oct 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 stickyBar.markdown → readme.markdown
    View file
    File renamed without changes.
  4. jasesmith renamed this gist Oct 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 stickyBar.md → stickyBar.markdown
    View file
    File renamed without changes.
  5. jasesmith renamed this gist Oct 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 readme.md → stickyBar.md
    View file
    File renamed without changes.
  6. jasesmith revised this gist Oct 8, 2014. 3 changed files with 0 additions and 0 deletions.
    0 stickybar → readme.md
    View file
    File renamed without changes.
    0 stickyBar CSS → stickyBar.css
    View file
    File renamed without changes.
    0 stickyBar JS → stickyBar.js
    View file
    File renamed without changes.
  7. jasesmith renamed this gist Oct 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 stcikyBar CSS → stickyBar CSS
    View file
    File renamed without changes.
  8. jasesmith revised this gist Oct 8, 2014. 2 changed files with 3 additions and 0 deletions.
    0 stickyBar → stickyBar JS
    View file
    File renamed without changes.
    3 changes: 3 additions & 0 deletions stickybar
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Sticky Bar
    -----------------------------
    Make an element sticky once it has scrolled out of view in a scrollable `<div>`
  9. jasesmith revised this gist Aug 13, 2014. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions stcikyBar CSS
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,8 @@
    .sticky-bar {
    .bar {
    position: fixed;
    left: 0; // or whatever makes it fit
    right: 0; // or whatever makes it fit
    }
    .bar {
    position: relative;
    }
    .sticky-bar .bar {
    position: fixed;
    left: 0; // or whatever makes it fit
    right: 0; // or whatever makes it fit
    }
  10. jasesmith revised this gist Aug 13, 2014. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions stcikyBar CSS
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    .sticky-bar {
    .bar {
    position: fixed;
    left: 0; // or whatever makes it fit
    right: 0; // or whatever makes it fit
    }
    }
  11. jasesmith revised this gist Aug 13, 2014. 1 changed file with 10 additions and 9 deletions.
    19 changes: 10 additions & 9 deletions stickyBar
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,20 @@
    function stickyBar(bar, pane) {
    var $bar = $(bar),
    var stickyBar = function(bar, pane) {
    var $body = $('body'),
    $bar = $(bar),
    $pane = $(pane),
    barHeight = $bar.outerHeight(true),
    $barParent = $bar.parent(),
    offset = $bar.offset().top - $pane.offset().top + barHeight;

    $pane.on("scroll", function() {
    var distance = $pane.scrollTop();
    $("body").toggleClass("sticky-bar", (distance > offset));
    if(distance > offset) {
    $bar.css({top: $pane.offset().top});
    $pane.on('scroll', function() {
    var distance = $pane.scrollTop();
    $body.toggleClass('sticky-bar', (distance > offset));
    if($body.hasClass('sticky-bar')) {
    $bar.css({top: Math.floor($pane.offset().top)});
    $barParent.css({paddingTop: barHeight});
    } else {
    $bar.css({top: 0});
    $barParent.css({paddingTop: 0});
    }
    });
    }
    });
    };
  12. jasesmith created this gist Jul 11, 2014.
    19 changes: 19 additions & 0 deletions stickyBar
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    function stickyBar(bar, pane) {
    var $bar = $(bar),
    $pane = $(pane),
    barHeight = $bar.outerHeight(true),
    $barParent = $bar.parent(),
    offset = $bar.offset().top - $pane.offset().top + barHeight;

    $pane.on("scroll", function() {
    var distance = $pane.scrollTop();
    $("body").toggleClass("sticky-bar", (distance > offset));
    if(distance > offset) {
    $bar.css({top: $pane.offset().top});
    $barParent.css({paddingTop: barHeight});
    } else {
    $bar.css({top: 0});
    $barParent.css({paddingTop: 0});
    }
    });
    }