Не могу заставить мою основную навигацию работать как липкая навигация - PullRequest
Новая
       4

Не могу заставить мою основную навигацию работать как липкая навигация

0 голосов
/ 22 сентября 2018

Я создал утилиту и главную панель навигации для этого собственного проекта, над которым я работаю, и я хочу, чтобы главная навигационная панель стала липкой при прокрутке 42px.

Однако при прокруткепанель навигации не прилипает к верхней части окна.Я проверил это с помощью утилиты nav, и она отлично работала.Вот мое кодирование для главной навигационной панели ... 

$(window).on("scroll", function () {

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

	console.log("The distance scrolled is: " + distanceScrolled);

	if(distanceScrolled>42){
		$("#main-nav").addClass("scrolled");
	}

	else{
		$("#main-nav").removeClass("scrolled");
	}
});
#main-nav {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #000000;
}

.main-nav-left {
	list-style: none;
	float: left;
	padding-left: 28px;
	height: 100px;
}

.main-nav-items {
	position: absolute;
	top: 40%;
	left: 290px;
	list-style: none;
	text-decoration: none;
}

.main-nav-items li {
	display: inline-block;
	padding-right: 12px;
	margin-right: 13px;
}

.main-nav-right li {
	float: right;
	padding-right: 12px;
	margin-right: 26px;
	margin-top: 40px;
	list-style: none;
}

#main-nav a {
	text-decoration: none;
	color: #ffffff;
}

.scrolled {
	position: fixed;
	top: 0;
	z-index: 1000;
}
<nav id="main-nav">
		<ul class="main-nav-left">
		    <li><a href="#"><img src="images/thule_logo.png" height="100" width="auto"></a></li>
		</ul>
		<ul class="main-nav-items">
			<li><a href="#">CARRIERS & RACKS</a></li>
			<li><a href="#">ACTIVE WITH KIDS</a></li>
			<li><a href="#">LUGGAGE & BAGS</a></li>
			<li><a href="#">SLEEVES & CASES</a></li>
			<li><a href="#">EXPLORE THULE</a></li>
		</ul>
		<ul class="main-nav-right">
			<li><a href="#"><i class="fas fa-search fa-lg"></i></a></li>
		</ul>
</nav>

<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>

1 Ответ

0 голосов
/ 22 сентября 2018

Прежде всего, для вашего html-элемента nav не определен класс nav.Так что в селекторе jQuery вам нужно выбирать по идентификатору (main-nav), как вы определили, или по самому элементу HTML nav.Вы можете сделать это: 

if(distanceScrolled>42){
        $("nav").addClass("scrolled");
    }

    else{
        $("nav").removeClass("scrolled");
}

или 

if(distanceScrolled>42){
            $("#main-nav").addClass("scrolled");
        }

        else{
            $("#main-nav").removeClass("scrolled");
    }

Но добавьте файл библиотеки jQuery перед вашим пользовательским скриптом. 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

секунда и самое важноеэто то, что вы добавляете класс (прокручиваемый), имеющий {position: fixed}.Поскольку Id имеет более высокий приоритет, чем Class, поэтому он не позволит классу перезаписать общее свойство CSS, как в этом случае 'position'.Таким образом, вы можете добавить! Важное к свойству селектора классов: 

.scrolled{
    position:fixed!important;
    top: 0;
    z-index: 1000;
    }

или

написать глубокий выбор CSS, чтобы сделать его приоритет выше Id.Как: 

#main-nav.scrolled {
    position:fixed;
    top: 0;
    z-index: 1000;
}

Оба будут работать.

...