Question

在屏幕顶部，我有一个标题：

<header class="push">
                            <div class="inner-wrap">
                                <a id="logo" href="/Default.aspx"><img src="/images/cianad_new.png" alt="Azi Map" /></a>    

                                <div id="accountname1" style="position:relative;float:right"> 
                                   <div id="divLogin" style="position:relative; margin-right:1px; margin-top:1%; float:right"> 
                                            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                                                <AnonymousTemplate> 

                                                </AnonymousTemplate>
                                                <LoggedInTemplate>Welcome <span class="bold"><asp:Label id="UserLogonID" runat="server"></asp:Label></span>
                                                    <br />                        
                                                     [<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/login.aspx" />]
                                                    <br />
                                                </LoggedInTemplate>
                                            </asp:LoginView>

                                            <p style="text-align:right">
                                                <asp:Label ID="lblFreeTrialDays" runat="server" Text=""></asp:Label>
                                            </p>
                                    </div>

                                     <ul id="nav">
                                            <li><a href="#Products" id="btn-products"><img src="/images/btn_layers.png" />Products</a></li>
                                            <li><a href="#AboutUs" id="btn-data"><img src="/images/btn_layers.png" />About Us</a></li>
                                            <li><a href="#ContactUs" id="btn-maps"><img src="/images/btn_maps.png" />Contact Us</a></li>
                                    </ul>                                               

                                    <div id="mobile-btn">
                                        <img src="/images/menu_btn.png" alt="Menu Button" />
                                    </div>
                               </div> 
                           </div> 
                    </header>

点击产品图片将跳转至产品div

  <div id="Products" style="background-color:red; width:100%;">
</div>

这一切都很好，但它不允许标题的高度...意味着前3行文本隐藏在标题后面，所以它似乎从第四行开始。是否可以从产品+ 20px中添加增量？

Answer 1

根据您想要的顶部偏移量，将目的地上的margin-top和padding-top设置为相等且相反。

在此代码段中，h1和#dest顶部之间的距离为50px，因此我将其用作目标的否定margin-top和正padding-top：< / p>

h1 {
  margin-top: 90%;
  height: 25px;
  margin-bottom: 25px;
}

#dest {
  margin-top: -50px;
  padding-top: 50px;
  margin-bottom: 100%;
}

<a href="#dest">Click me</a>

<h1>Header</h1>
<div id="dest">
  Destination
</div>

Answer 2

如果您为每个导航项添加了一个“js-nav-link”类，并为要为其预留空间的整个标题部分添加了“header-block”类，则：

        var headerHeight = $('.header-block').height();
        var contentOffset = headerHeight;

        /* This does slow scroll to corresponding section */
        $('body').on('click', '.js-nav-link', function(event){
            event.preventDefault();
            var $toggleHandle = $(this.hash);
            var scrollTopValue = $toggleHandle.offset().top - contentOffset;
            $('html, body').animate({
                scrollTop: scrollTopValue
            }, 600);
        });

这是一个jquery解决方案，因为我还想要一个很好的滚动动画，当我有一个固定的顶部标题部分。

Answer 3

过去我和你有同样的问题。我想知道我应该怎么做，然后很有想法来到我的脑海！

我们都喜欢hidden元素，所以我用#SAMPLE创建了一个隐藏的跨度，我的锚跳转到这个元素。附加我用relative属性定位它所以我可以四处移动它！

这是一个示例代码，请查看并告诉我它是否对您有帮助！

JSFiddle

振作！

使用＃跳转到位置+增量

3 个答案: