Question

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

我不知道它叫什么，但我喜欢当你点击搜索按钮时，它会扩展到搜索页面，你点击另一个图标，然后它会显示为自己的页面。

我如何做到这一点？是否有一些使用html5，JavaScript或jQuery的教程？

注意：到目前为止，所有答案仅涵盖浮动栏，但不是点击该浮动栏上的链接以显示向右扩展的窗口。

Answer 1

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

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

检查http://jsfiddle.net/TVwAv/

处的工作示例

Answer 2

使用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 */
}

Answer 3

我正在使用它来“浮动（粘性）菜单”。
我所添加的是：

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);
    }
 });`

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; 
}

我没有测试过，但希望它有效。

Answer 5

我知道这看起来相当大的代码，但是这个函数只是通过指定三个简单的选项来工作;您的浮动“顶部”，您的“目标”（浮动）和“参考”元素来设置边界，它还自动处理顶部和底部位置，不涉及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);
});

我希望这有助于某人。

你如何制作像envato这样的浮动侧边栏？

5 个答案:

检查http://jsfiddle.net/TVwAv/