我如何制作粘性导航栏，其上面没有特定高度的响应元素？

Question

所以我在页面顶部有100％的屏幕宽度标题图像，在图像下面有文本元素。在文本元素下面，我尝试使用以下代码制作粘性导航栏：

$(function(){
    var stickyRibbonTop = $('#stickyribbon').offset().top;  
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('#stickyribbon').css({position: 'fixed', top: '0px'});
            } else {
                    $('#stickyribbon').css({position: 'static', top: '0px'});
            }
    });
});

问题是当我向下滚动文本元素的高度时，粘性导航栏已经跳转到页面顶部。所以它完全忽略了标题图像。我有这个图像的高度自动，但它显然什么也没做。

Answer 1

我自己解决了。解决方案是使div没有高度和padding-bottom作为标题图像高度与其宽度的百分比，并将图像放在该div中。