Question

我理解这似乎是一个常见的请求，但经过几个帖子后，我找不到解决方案和/或缺乏知识来根据我的需要定制javascript。

我正在寻找一种方法让我的Navbar一旦到达顶部就会粘到页面顶部（滚动得足够远）。我遇到的问题是我的Navbar当前使用flex定位，而不是已经在页面顶部。

＆＃13;

<header id="logo2">
	<a href="index.html"><img src="logo.png" alt="Logo"/></a>
</header>

<nav>
<ul id="navigation" class="menu2">
  <li><a href="index.html">HOME</a></li>
  <li class="active"><a href="gallery.html">GALLERY</a></li>
  <li><a href="art.html">ART</a></li>
  <li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</body>

＆＃13;

#!/usr/bin/python
# -*- coding: utf-8 -*-

import psycopg2
import sys


con = None

try:
    con = psycopg2.connect("host='localhost' dbname='test123' user='postgres' password='XXX'")   
    cur = con.cursor()
    cur.execute("CREATE TABLE Products(Id INTEGER PRIMARY KEY, Name VARCHAR(20), Price INT)")
    cur.execute("INSERT INTO Products VALUES(1,'Milk',5)")
    cur.execute("INSERT INTO Products VALUES(2,'Sugar',7)")
    cur.execute("INSERT INTO Products VALUES(3,'Coffee',3)")
    cur.execute("INSERT INTO Products VALUES(4,'Bread',5)")
    cur.execute("INSERT INTO Products VALUES(5,'Oranges',3)")
    con.commit()
    except psycopg2.DatabaseError as e:
if con:
    con.rollback()

print ("Error %s % e")
sys.exit(1)

finally:   
    if con:
        con.close()

＆＃13;

Answer 1

.menu2 {
  width: 100%; height: 100%;
  background-color: rgb(240, 240, 240);
  position: sticky;
  left: 0; top: 0;
}

.emptySpace {width: 100%; height: 1000000px;}

<span class="menu2">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
  <a href="">Link 5</a>
</span>

<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>

如果我正确理解你的问题，你可以使用
HTML：

<span class="menu2">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
</span>

CSS：

.menu2 {position: sticky;}

当用户向下滚动时，这将导致导航栏粘在屏幕顶部。您可以在W3Schools处进一步阅读此内容。另外，请在Weave点击我的LiveWeave。

Answer 2

好吧，我终于找到了问题的答案。对于那些你感兴趣的人。

<强> JS

var num = 240; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu2').addClass('fixed');
        $('.main').addClass('main2');
    } else {
        $('.menu2').removeClass('fixed');
        $('.main').removeClass('main2');
    }
});

滚动时粘滞导航栏

2 个答案: