css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部

html-使用CSS滚动时，使导航栏保持顶部

我正在尝试使导航栏与页面一起移动，但是如果用户向下滚动，则导航栏会停留在顶部。 谁能提供任何示例或如何提供？ 非常感激。 (我用其他任何语言都没有希望)。 我尝试使用css sticky，但是没有用。

• 
  BLINK
• 
  ADVERTISING WITH BLINK
• 
  EDUCATING WITH BLINK
• 
  ABOUT US

/* www..com

Blinx Service

Created by Pierre Chedraoui

(c) Copyright 2015

*/

/* BODY */

body {

margin: 0px;

background-color: #000000;

height: 2000px;

}

/* 1. HEADER */

.headercss {

width: auto;

height: 320px;

background-color: #000000;

position: relative;

}

.headerlogo {

width: auto;

height: 250px;

background-color: #272727;

position: relative;

}

.nav {

width: auto;

height: 70px;

background-color: #272727;

position: relative;

overflow: hidden;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

float:left;

width:100%;

overflow: hidden;

}

li {

float: left;

width:25%;

min-width: 243px;

overflow: hidden;

}

a:link, a:visited {

display: block;

height: 68px;

min-width: 243px;

font-size: 12px;

color: #FFFFFF;

border-right: 1px solid #000000;

border-top: 1px solid #000000;

background-color: #272727;

text-align: center;

text-decoration: none;

font-family: 'Raleway', Arial;

letter-spacing: 2pt;

line-height: 200%;

overflow: hidden;

}

a:hover, a:active {

background-color: #242424;

}

11个解决方案

47 votes

put what you want here

just adjust javascript size to match this window

• Nav Bar
• Sign In
• Blog
• About

and more stuff to continue scrolling here

put what you want here

just adjust javascript size to match this window

• Nav Bar
• Sign In
• Blog
• About

and more stuff to continue scrolling here

put what you want here

just adjust javascript size to match this window

• Nav Bar
• Sign In
• Blog
• About

and more stuff to continue scrolling here

Yash Thakur answered 2020-07-24T19:22:02Z

15 votes

添加到您的.nav css块

position: fixed

它会工作

TheLovelySausage answered 2020-07-24T19:22:26Z

12 votes

我希望这可以帮助某人。 通过js确定导航偏移量，然后将粘性位置css应用于导航：

但是首先，我们将像这样在样式表中定义样式。

.sticky {

position: fixed;

width: 100%;

left: 0;

top: 0;

z-index: 100;

border-top: 0;

}

然后，我们将使用jQuery有条件地将该类应用于导航。

$(document).ready(function() {

var stickyNavTop = $('.nav').offset().top;

var stickyNav = function(){

var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) {

$('.nav').addClass('sticky');

} else {

$('.nav').removeClass('sticky');

}

};

stickyNav();

$(window).scroll(function() {

stickyNav();

});

});

Amar Pratap answered 2020-07-24T19:22:55Z

5 votes

只需使用最高喜欢的答案中所述的z-index CSS属性，导航栏将停留在顶部。

例：

• Home
• Contact

.navigation {

/* fixed keyword is fine too */

position: sticky;

top: 0;

z-index: 100;

/* z-index works pretty much like a layer:

the higher the z-index value, the greater

it will allow the navigation tag to stay on top

of other tags */

}

Styx answered 2020-07-24T19:23:19Z

4 votes

CSS：

.headercss {

width: 100%;

height: 320px;

background-color: #000000;

position: fixed;

}

属性position: fixed将使其保持不变，而其他内容将是可滚动的。 不要忘记设置width:100%以使其完全填充到右侧。

例

Ilia Rostovtsev answered 2020-07-24T19:23:47Z

2 votes

固定标题CSS位置。

.headercss {

width: 100%;

height: 320px;

background-color: #000000;

position: fixed;

top:0

}

然后为内容容器设置一个320px的填充顶部，这样它就不会出现在标题后面。

Psygnosis answered 2020-07-24T19:24:12Z

1 votes

您只能通过创建菜单两次来使用CSS进行操作。 这不是理想的选择，但是一旦它位于顶部，就可以为菜单提供不同的设计，并且除了CSS，没有jQuery，您将一无所有。这是DIV的示例(当然，您可以根据需要将其更改为NAV)：

THIS IS MY HIDDEN MENU

Here is my header with a lot of text and my main menu

MY BODY

然后具有以下CSS：

#hiddenmenu {

position: fixed;

top: 0;

z-index:1;

}

#header {

top: 0;

position:absolute;

z-index:2;

}

#body {

padding-top: 80px;

position:absolute;

z-index: auto;

}

这是一个小提琴供您查看：[https://jsfiddle.net/brghtk4z/1/]

iMac Ange answered 2020-07-24T19:24:40Z

0 votes

/* Add css in your style */

.sticky-header {

position: fixed;

width: 100%;

left: 0;

top: 0;

z-index: 100;

border-top: 0;

transition: 0.3s;

}

/* and use this javascript code: */

$(document).ready(function() {

$(window).scroll(function () {

if ($(window).scrollTop() > ) {

$('.headercss').addClass('sticky-header');

} else{

$('.headercss').removeClass('sticky-header');

}

});

});

Sanjay Jadon answered 2020-07-24T19:24:56Z

0 votes

我建议使用Bootstrap。 [http://getbootstrap.com/。]这种方法非常简单，轻巧。

• 
  BLINK
• 
  ADVERTISING WITH BLINK
• 
  EDUCATING WITH BLINK
• 
  ABOUT US

您需要将Bootstrap包含到您的项目中，其中将包含必要的脚本和样式。 然后只需将类称为“ navbar-fixed-top”。 这将达到目的。 见上面的例子

Swinkaran answered 2020-07-24T19:25:20Z

0 votes

只需调用此代码，然后将其调用到导航栏即可获取粘性导航栏

.sticky {

/*css for stickey navbar*/

position: sticky;

top: 0;

z-index: 100;

}

Hamza Chaudhry answered 2020-07-24T19:25:40Z

0 votes

要使页眉变粘，首先必须指定位置：固定； 在CSS头。 然后，您可以调整宽度和高度等。我强烈建议您遵循本文。 如何创建粘性网站标题

这也是在标头上变通使其变粘的代码。

header {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

上面的代码将放在您的styles.css文件中。

Zahid Iqbal answered 2020-07-24T19:26:09Z