Question

我试图在这里寻找这个问题的解决方案，但似乎我“可能”拥有的最接近的解决方案是this。但这适用于表格。由于我对此仍然很陌生，我不确定如何将此解决方案应用于我的问题。或者，如果这甚至是正确的解决方案。

我的问题是，当导航栏粘住时，我博客帖子标题的边框（底部）消失了。我所指的特定边框底部是博客日期，分享和类似按钮下的虚线。我会喜欢添加屏幕截图，但由于我是新来的，所以不会让我这么做。

此问题仅发生在iPad 我相信。所以我不确定我的iPad（第一代）是不是问题。我的博客是bizinformant.tumblr.com

非常感谢！

以下是html css jQuery：

/*blog post box*/
#content #posts {
    width:800px;
    margin:20px auto 50px;
    text-align:center;
    background-color:#f7f3ef;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    padding:10px 20px 24px;
    }

/*this border-bottom of this element disappears when nav bar sticks*/
#permy {
    font-style:normal;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:1.3em;
    text-align:left;
    margin-bottom:15px;
    padding-bottom:8px;
    border-bottom:1px dashed #000;
}

#mainnav {
    list-style-type: none;
    width:100%;
    z-index:3;
    text-align:center;
    margin:0;
    }

#mainnav ul {
    display:inline-block;
    margin-top:0px;
    margin-bottom:0px;
    list-style-type: none;
    padding: 0;
    z-index:3;
}
#mainnav li {
    display:inline;
    text-align:center;
    margin:0px;
    z-index:3;
}

/*stickydiv*/
#stickyalias {
    display: none;
    height: 10px;
}

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#mainnav').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#mainnav').css({position: 'fixed', top: '0px', left: '0px'});
                    $('#stickyalias').css('display', 'block');
            } else {
                    $('#mainnav').css({position: 'static', top: '0px'});
                    $('#stickyalias').css('display', 'none');
            }
    });
});

{block:Text}
        {block:Title}
            <h1 class="title">
                <a href="{Permalink}">{Title}</a>
            </h1>
                <div id="permy">
                    <a href="{Permalink}" class="date">
                        {block:Date}{ShortMonth} {DayOfMonth}, {ShortYear} {/block:Date}
                    </a>

                    {block:NoteCount}
                    <span id="dashy">-</span>
                    <a href="{Permalink}#notes" class="notes">
                        <span class="perm">{NoteCountWithLabel}
                    </a>
                    {/block:NoteCount}
                    <div class="my-like" title="Like">{LikeButton color="black"}</div>

                    {block:HasTags}
                    <a href="{ReblogURL}" class="reb">
                        <img src="http://static.tumblr.com/tnbktxc/HWun9rla7/reblog.png" class="reblogbutton">
                    </a>
                    {/block:HasTags}
                </div>
        {/block:Title}
            <div class="text">{Body}</div>
        {block:More}
            <div class='rmlink'>
                <a href="{Permalink}">Read more</a>
             </div>
        {/block:More}
{/block:Text}<!--textpost-->

边框用Sticky Header消失

0 个答案: