Question

浏览网页我看到网站带有浮动设计元素。但我无法找到它的名称。有人知道以下元素的名称：

在adobe网站上有一个黄色方框，上面写着“这有用吗？”。向下滚动时，它会停留在屏幕顶部。 http://www.adobe.com/devnet/fireworks/learning_guide/design/design_guide_pt4.html

我在哪里可以找到有关它的更多信息？感谢。

Answer 1

有一个名为Sticky sidebar的插件就是这样做的。

Article和Demonstration

Answer 2

查看Sticky jQuery plugin。它应该做你想要的。

Answer 3

它被称为粘性边栏。

Here是演示加代码的链接。

Answer 4

它使用简单的css样式position:fixed来确保元素在页面滚动时保持在视口中的位置。

但是，您提供的链接会对其进行扩展，因为position:fixed样式仅在您向下滚动页面一定距离后才会应用。实现它的最简单方法是使用jQuery在用户向下滚动时更改元素的类。

这是一个可以相应更改类的函数。

jQuery(document).ready(function($){
// Check the initial Position of the Sticky Element
    var stickyElementTop = $('#stickyElement').offset().top;

// Apply the CSS class if you scroll past
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyElementTop ) {
                    $('#stickyElement').addClass('sticky');                      
                } else {
                    $('#stickyElement').removeClass('sticky');                        
            }
    });
}

然后使用css

#stickyElement{
    position:absolute/relative/whatever;
    }
.sticky{
    position:fixed!important;
    }

这个网页设计元素/技巧的名称是什么？

4 个答案: