-1

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

有什么建议么？

这是我的小提琴 http://jsfiddle.net/cancerian73/5525K/

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

2 回答 2

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>

于 2013-12-07T13:54:42.223 回答
0

编辑：您可以尝试使用固定位置设置图标的样式。这是一个如何做到这一点的示例：

var menu = $('.navbar');
var origOffsetY = menu.offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > origOffsetY) {
        $('#wrapper').addClass('sticky');
    } else {
        $('#wrapper').removeClass('sticky');
    }    
});

我还更改了以下元素的样式：

.top-icon-box {
    margin:3px 0 0 0;
    width:157px;
    height:25px;
    background-color:#ccc;
    position:fixed;
    top:5px;
    right:20px;
    transition: all 0.2s linear;
}
....
.sticky .navbar {
    position:fixed;
    top:0;
}
.sticky .top-icon-box {
    top:100px;
}

现在代码看起来更简化了。唯一要做的就是更改包装元素的类。这是代码链接：http: //jsfiddle.net/47tMu/

于 2013-12-07T11:03:42.813 回答