Question

当我点击锚链接（链接到文章标题）时，它会完全显示在页面顶部。但是由于粘性页面标题，无法看到文章标题。

我想'向下移动'，在页面标题下面看到。

这是codepen：link。（在侧边栏上，您必须打开名为“HERE HERE HERE HER”的链接;））

HTML：

<body>
<div class="main-container">
<div class="box">
    <header class="page-header">
        <h1>
        MAIN HEADER
        </h1>
    </header>
    <main class="main-content">
        <article class="single-article" id="warstwy">
            <header class="article-title">
                <h1>Warstwy modelu ISO/OSI</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li><strong>Warstwa fizyczna</strong></li>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
                    </ul>
                </ul>
            </div>
        </article>
        <article class="single-article" id="tcp">
            <header class="article-title">
                <h1>TCP</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
                </ul>
            </div>
        </article>
        <article class="single-article" id="ip">
            <header class="article-title">
                <h1>IP</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
                </ul>
            </div>
        </article>
        <article class="single-article" id="tcp_ip">
            <header class="article-title">
                <h1>TCP/IP</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
                </ul>
            </div>
        </article>
        <article class="single-article" id="udp">
            <header class="article-title">
                <h1>UDP (User Datagram Protocol)</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales. Cras lectus lorem, venenatis sed nisi vitae, egestas dignissim nulla. Maecenas quis ornare quam. Suspendisse blandit leo non felis feugiat, sed porttitor eros luctus. Aliquam in magna est. Suspendisse commodo elit et leo tincidunt accumsan. Fusce convallis lacus lacus, a laoreet arcu condimentum id. Etiam dictum tortor molestie eros lobortis faucibus. Cras aliquam eu sem ut dignissim. Morbi mollis sit amet augue sed euismod. Ut id varius lacus, nec sollicitudin neque. Integer lobortis sapien in consequat hendrerit. Duis a lectus id odio blandit ultrices vitae sed leo.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="adresy">
            <header class="article-title">
                <h1>Adresy IP</h1>
            </header>
            <div class="article-content">
                <ul>

                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="dns">
            <header class="article-title">
                <h1>DNS (Domain Name Service)</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="vpn">
            <header class="article-title">
                <h1>VPN (Virtual Private Network - Wirtualna Sieć Prywatna)</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="metody">
            <header class="article-title">
                <h1>Metody szyfrowania i zabezpieczania transmisji</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="gniazda">
            <header class="article-title">
                <h1>Gniazda</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
        <article class="single-article" id="architektura">
            <header class="article-title">
                <h1>Architektura klient-serwer</h1>
            </header>
            <div class="article-content">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>

                </ul>
            </div>
        </article>
    </main>
    <footer class="footer">
        <p>Copyright &copy 2017 Konrad Wolniak All Rights Reserved</p>
    </footer>
    <nav class="site-nav">
        <header class="nav-header">
            <h2>Spis treści</h2>
        </header>
        <section class="nav-menu">
            <a class="accordion-head"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>Kodowanie kanałowe</li></a>
                    <a href="#"><li>Zwielokrotnienie pasma</li></a>
                    <a href="#"><li>Koordynacja czasowa</li></a>
                    <a href="#"><li>Interfejsy szeregowe i równoległe</li></a>
                    <a href="#"><li>Interfejsy systemowe</li></a>
                    <a href="#"><li>Interfejsy zewnętrzne</li></a>
                    <a href="#"><li>Polling</li></a>
                    <a href="#"><li>Przerwania</li></a>
                    <a href="#"><li>Point-to-point</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>CISC</li></a>
                    <a href="#"><li>RISC</li></a>
                    <a href="#"><li>Architektura procesora</li></a>
                    <a href="#"><li>Pozostałe o procesorze</li></a>
                    <a href="#"><li>Potokowość</li></a>
                    <a href="#"><li>Superskalarność</li></a>
                    <a href="#"><li>Wielordzeniowość</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">Procesy i wątki<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>PCB</li></a>
                    <a href="#"><li>Stan i kolejki procesów</li></a>
                    <a href="#"><li>Przełączanie kontekstów</li></a>
                    <a href="#"><li>Synchronizacja/związek procesów i wątków</li></a>
                    <a href="#"><li>Mutex, semafor i sekcja krytyczna</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>Budowa dysku</li></a>
                    <a href="#"><li>Najważniejsze parametry</li></a>
                    <a href="#"><li>Adresowanie</li></a>
                    <a href="#"><li>Technologie dysków SSD</li></a>
                    <a href="#"><li>Buforowanie zapisu</li></a>
                    <a href="#"><li>RAID</li></a>
                    <a href="#"><li>Struktura logiczna dysku</li></a>
                    <a href="#"><li>MBR</li></a>
                    <a href="#"><li>Systemy plików</li></a>
                    <a href="#"><li>FAT</li></a>
                    <a href="#"><li>NTFS</li></a>
                    <a href="#"><li>EXT2/EXT4</li></a>
                    <a href="#"><li>Użytkownicy i grupy</li></a>
                    <a href="#"><li>Uprawnienia oraz atrybuty plików i katalogów</li></a>
                    <a href="#"><li>Pliki ukryte i wykonywalne</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>Pamięć obrazu/bufor ramki</li></a>
                    <a href="#"><li>Reprezentacja pikseli</li></a>
                    <a href="#"><li>GPU-pipeline</li></a>
                    <a href="#"><li>Shader</li></a>
                    <a href="#"><li>OpenGL</li></a>
                    <a href="#"><li>Prymitywy geometryczne</li></a>
                    <a href="#"><li>Reprezentacja obiektów</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#"><li>Dowiązania do plików</li></a>
                    <a href="#"><li>Systemy plików</li></a>
                    <a href="#"><li>Ważne katalogi</li></a>
                </ul>
            </div>
            <hr>
            <a class="accordion-head">HERE HERE HERE<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
            <div class="dropdown-content">
                <ul>
                    <a href="#warstwy"><li>Warstwy modelu ISO/OSI</li></a>
                    <a href="#tcp"><li>TCP</li></a>
                    <a href="#ip"><li>IP</li></a>
                    <a href="#tcp_ip"><li>TCP/IP</li></a>
                    <a href="#udp"><li>UDP</li></a>
                    <a href="#adresy"><li>Adresy IP</li></a>
                    <a href="#dns"><li>DNS</li></a>
                    <a href="#hub"><li>Hub, switch, router</li></a>
                    <a href="#vpn"><li>VPN</li></a>
                    <a href="#metody"><li>Metody szyfrowania i zabezpieczania transmisji</li></a>
                    <a href="#gniazda"><li>Gniazda</li></a>
                    <a href="#architektura"><li>Architektura klient-serwer</li></a>
                </ul>
            </div>
        </section>
        <!-- <button class="hamburger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </button> -->
    </nav>

    </div>
</body>

Answer 1

我遇到了同样的问题，你不能再使用锚了。尝试jquery animate滚动到顶部偏移顶部。这是一个例子

    var $stickyNav = $('#nav_main'),
        stickyNavHeight = $stickyNav.innerHeight(),
        topPaddingOffset = 20,
        fullTopOffset = stickyNavHeight + topPaddingOffset

//点击网址

$('YOUR LINK').on('click', function(e) {

            var targetDiv = $(this).attr('href');      
      $('html, body').animate({

                    scrollTop: $(targetDiv).offset().top - fullTopOffset

                   }, 500);
});

Answer 2

我通过在标题标记之前的某个隐藏元素上的某处添加id属性来解决同样的问题。在你的情况下，它将是这样的：

<div id="tcp" style="margin-top: -100px; position: absolute;"></div>
<article class="single-article">
            <header class="article-title">
                <h1>TCP</h1>
            </header>
            <div class="article-content">
                <ul>
                    ...

如何使锚链接不完全显示在页面顶部？

2 个答案: