1

网上冲浪 我看到带有浮动设计元素的网站。但我找不到它是如何被调用的。有人知道以下元素的名称：

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

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

4

4 回答 4

2

有一个名为 Sticky sidebar 的插件可以做到这一点。

文章和演示

于 2013-02-12T08:56:02.717 回答
1

看看Sticky jQuery 插件。它应该做你想做的事。

于 2013-02-12T08:53:40.223 回答
1

它被称为粘性侧边栏。

这是演示和代码的链接。

于 2013-02-12T09:04:25.693 回答
1

它使用简单的 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;
    }
于 2013-02-12T11:21:08.353 回答