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

Posted 2023-03-05

【中文标题】如何制作像 envato 这样的浮动侧边栏？

【英文标题】：How do you make a floating sidebar like envato?

【发布时间】：2011-10-26 07:27:58

【问题描述】：

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

http://envato.com/

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

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

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

【问题讨论】：

请注意：我真的不喜欢这个功能。这很尴尬，不直观，并且由于位置固定，我无法访问某些链接。我认为这是 UI 失败。您的用户可能会有同样的感受。

【参考方案1】：

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

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

【参考方案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);
    
 );`

【参考方案3】：

你可以用这个..

你的 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; 

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

【讨论】：

矫枉过正。 position: fixed 就足够了。

【参考方案4】：

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

【讨论】：

position:absolute 将不起作用。它会随着页面向下滚动。要让 div 在滚动时保持原位，您需要 position:fixed

【参考方案5】：

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

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

在http://jsfiddle.net/TVwAv/查看工作示例