javascript - 如何让这个 float 图标下降并保持粘性

Question

我正在尝试让这个图标向下滚动，并在一些像素保持固定之后。我设法在滚动后修复了标题，但不知道如何做这部分。就像雅虎如何在不倒翁上有这个一样 http://yahoo.tumblr.com/见右上角

有什么建议吗？

这是我的 fiddle http://jsfiddle.net/cancerian73/5525K/

#scroller 
{
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}

Answer 1

这里:

$(function() {

  var scroller = $('#scroller'),
      sidebar  = $('#sidebar'),
      iconBar  = $('header ul'),
      distance = $('header').outerHeight() - scroller.outerHeight(),
      pos      = $('#positioner');

  $(window).scroll(function() {

    if($(this).scrollTop() >= 0) {
       $('body').stop().animate({ top: - pos.offset().top / 3 + 'px' }, 200, 'linear');
    }
    if($(this).scrollTop() > distance && scroller.hasClass('default')) {
        scroller.removeClass('default').addClass('fixed');
        sidebar.css({ position: 'fixed', marginLeft: '0', top: '80px' });
        iconBar.animate({ top: '90px' }, 300);
    } 
    else if($(this).scrollTop() < distance && scroller.hasClass('fixed')) {
        scroller.removeClass('fixed').addClass('default');
        sidebar.css({ position: 'relative', top: '0'});
        iconBar.animate({ top: '5px' }, 300);
    }

  });

});

body {
    background: #eee;
    position: relative;
    height: 3000px;
    margin: 0;
    padding: 0;
    top: 0;
}
ul {
    list-style: none;
}
header {
    background: #3f008f;
    height: 250px;
}
header ul  {
    position: fixed;
    top: 5px;
    right: 5px;
}
header ul li {
    background: #777;
    display: inline-block;
    width: 100px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
}
#scroller {
    background: #ccc;
    top: 0;
    width: 100%;
    height: 80px;
}
.default {
    position: relative;
}
.fixed {
    position: fixed;
}
#positioner {
    position: fixed;
    display: block;
    top: 0;
}
#wrapper {
    width: 960px;
    min-height: 800px;
    margin: 0 auto;
}
#main {
    background: #fff;
    float: right;
    width: 79%;
    min-height: 3000px;
    padding: 10px;
}
#sidebar {
    float: left;
    width: 180px;
    min-height: 800px;
}
#sidebar ul {
    padding-top: 15px;
}
#sidebar ul li {
    display: inline-block;
    width: 100%;
    padding: 0 0 7px 0;
    margin-bottom: 5px;
    text-align: right;
    font: bold 12px/12px Verdana, Geneva, sans-serif;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    transition: color 0.2s ease-in;
}
li:hover {
    color: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="positioner"></span>

<header>
  <ul>
    <li>Icon 1</li>
    <li>Icon 2</li>
  </ul>
</header>

<div id="scroller" class="default"></div>

<div id="wrapper">
    
  <div id="main">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci risus, vehicula eu bibendum eu, eleifend quis augue. Mauris vel euismod est. Proin aliquet interdum purus, ut vestibulum metus eleifend a. Nulla gravida tortor eget libero pellentesque ornare. Sed viverra fringilla tempor. Fusce eu ipsum odio. Donec vestibulum leo sit amet metus accumsan malesuada. Nunc in tellus dapibus, pulvinar ante quis, imperdiet odio. Morbi quam ante, molestie id nisl eu, bibendum aliquet ante. Nullam sed malesuada est. Maecenas est eros, fermentum tempus massa ac, euismod interdum sem. Ut sit amet lobortis ipsum. Mauris egestas tristique mauris, at fringilla lorem fermentum id. Quisque imperdiet nisl nec enim tincidunt, at semper nisl varius. Integer vulputate, risus at ullamcorper vehicula, tellus lorem sodales est, ac feugiat elit turpis adipiscing ipsum.

Vivamus blandit lacinia ipsum, nec tristique velit. Proin quis commodo enim. Aliquam sit amet diam quis lacus consequat pulvinar. Fusce ac diam sit amet lorem feugiat semper. Proin et porta sapien, id accumsan dolor. Proin quis ornare justo. Morbi enim dui, congue eget mauris quis, auctor malesuada dolor. Vivamus iaculis lacus quis dapibus blandit. Pellentesque ultricies imperdiet velit, id hendrerit lacus vestibulum sed. Sed elementum, justo pharetra porttitor auctor, odio magna semper justo, eget volutpat dolor risus in lectus. Aenean sollicitudin tincidunt posuere. Vivamus lorem diam, feugiat sit amet purus nec, ullamcorper pulvinar nisl. Phasellus id leo et velit pharetra mattis. Aenean a laoreet augue, sed gravida leo. Proin accumsan massa nisl, sit amet congue lorem sodales non.

Etiam velit lorem, luctus at orci quis, sollicitudin hendrerit quam. Sed vitae odio interdum, iaculis erat ut, eleifend sapien. Aliquam ornare tincidunt lorem, non blandit dolor rutrum at. Maecenas consequat sit amet mi et porta. Integer ut diam id nunc consequat venenatis ut non elit. Donec id dolor ut quam bibendum bibendum. In hac habitasse platea dictumst. Fusce viverra, magna in blandit accumsan, purus libero placerat nulla, eget dignissim ligula tortor eu eros. Morbi at laoreet elit, sed vehicula dui. Phasellus et velit neque. Mauris dictum felis id elit molestie, eget fringilla velit faucibus. Sed non mi faucibus leo venenatis pulvinar sed ut lorem. Aenean ultrices vulputate ipsum eu lobortis. Vestibulum vitae ante eget diam mollis bibendum in eget est. Aliquam a vulputate elit, et tincidunt dolor. Sed tortor quam, pharetra ut leo quis, venenatis ornare tortor.

Sed euismod mauris felis, vel rutrum arcu congue nec. Curabitur ante arcu, hendrerit et magna mollis, consequat dapibus dui. Phasellus ut condimentum nisl. Suspendisse ut luctus libero, a gravida ligula. Nullam non convallis massa, ac facilisis neque. Proin libero magna, convallis non diam auctor, vestibulum elementum massa. Nulla facilisi. Curabitur hendrerit commodo iaculis. Donec pellentesque metus ut sagittis consequat.

Vestibulum tristique lobortis orci at imperdiet. Nullam at tellus nec sapien ultricies placerat a et orci. Cras porttitor iaculis velit a posuere. Mauris rhoncus mi lectus, a dictum dolor venenatis ut. Integer dapibus, massa nec feugiat varius, lectus sem laoreet sem, sed adipiscing justo ipsum vel eros. Sed non mi est. Donec fringilla mollis lectus, at convallis mi iaculis ut. Maecenas eu leo non sapien viverra hendrerit. Cras id lacus quis neque commodo porta. Nunc non mi at diam pulvinar convallis...
    </p>
  </div>


  <div id="sidebar">

    <ul>
      <li>Icon 1</li>
      <li>Icon 2</li>
      <li>Icon 3</li>
      <li>Icon 4</li>
      <li>Icon 5</li>
      <li>Icon 6</li>
      <li>Icon 7</li>
      <li>Icon 8</li>
      <li>Icon 9</li>
    </ul>
    
  </div>
    
    
    </div>