如何制作像Envato一样的悬浮侧边栏？

Question

我很喜欢以下网站左侧的浮动面板：

http://envato.com/

我不知道它叫什么名字，但我喜欢当你点击搜索按钮时它会展开到一个搜索页面，你点击另一个图标，它就像展开了它自己的页面。

我该如何实现这一点？ 是否有使用html5，JavaScript或jQuery的教程？

注意：到目前为止，所有答案都只涉及浮动栏，但没有涉及在该浮动栏上单击链接以显示向右展开的窗口。

- Teviere

---

仅仅是个提醒：我真的不喜欢这个功能。它很笨拙，不直观，而且由于固定位置，我无法访问某些链接。我认为这是用户界面失败了。你的用户可能也有同样的感觉。 - Wesley Murch

Answer 1

<div id="float"></div>

#float{
    position:fixed;
    top:50px;
    left:0;
}

请查看http://jsfiddle.net/TVwAv/获取可运行的示例。

- Hussein

Answer 2

我正在使用“浮动（粘性）菜单”。我所添加的内容如下：

1. 为了避免我的“页脚”始终被“滚动”，在侧边栏有点高的情况下，只有当内容高于侧边栏时才进行滚动。
2. 我发现动画效果对我来说有些“抖动”，所以我只是通过jquery更改了css。当然，你可以在动画时间中放入0，但动画仍然会发生，所以使用css更加干净和快速。
3. 100是我的标题栏的高度。你可以认为这是进行滚动的“阈值”。

 $(window).scroll(function(){
    if ($('#sidebar').height() < $('#content').height())
    {
    if ($(this).scrollTop() > 90)
        $('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 });
        //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0);
    else
        $('#sidebar').css({"margin-top": ($(this).scrollTop()) });
        //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0);
    }
 });`

- Idan

Answer 3

使用CSS完成，

HTML

<div id="floating_sidebar">
 whatever you want to put here
</div>

CSS

#floating_sidebar {
 position:fixed;
 left: 0;
 top: 100px; /* change to adjust height from the top of the page */
}

- Grigor

---

position:absolute 不起作用，它会随着页面滚动而滚动。为了使 div 在滚动时保持在原位，您需要使用 position:fixed。 - Hussein

Answer 4

你可以使用这个...

你的 HTML div 在这里

<div id="scrolling_div">Your text here</div>

你的 JavaScript 函数在这里

$(window).scroll(function(){
    $('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
    });

你也可以使用 CSS 进行这个操作

#scrolling_div {
 position:absolute;
 left: 0;
 top: 100px; 
}

我还没有测试过，但希望它能够正常工作。

- chhameed

---

过度了。position: fixed 就足够了。 - Madara's Ghost

Answer 5

我知道这段代码看起来很长，但是这个函数只需要指定三个简单的选项就可以工作；你的浮动元素“top”，你的“目标”（浮动元素）和“参考”元素来设置边界，它还会自动处理顶部和底部位置，不需要涉及CSS。

function scrollFloater(marginTop, reference, target, fixWhidth = false){

  var processScroll = function(){
    var from = reference.offset().top - marginTop;
    var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight();
    var scrollTop = $(this).scrollTop();
    var bottom = to - reference.offset().top + marginTop;

    if( fixWhidth )
      target.css('width', target.width());

    if( scrollTop > from && scrollTop < to )
      target.css('position', 'fixed').css('top',marginTop);
    else if( scrollTop >= to )
      target.css('position', 'absolute').css('top', bottom);
    else
      target.css('position', '').css('top',marginTop);

  }

  $(window).scroll(function(){ processScroll(); });
  processScroll();

}

这是如何使用它的方法：

$(function() {
    scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});

我希望这能对某人有所帮助。

- human