Блог

Главная - Вопросы по программированию - Почему моя липкая навигационная панель меняет выравнивание навигационной панели и пространства героя, как только я прокручиваю?

Почему моя липкая навигационная панель меняет выравнивание навигационной панели и пространства героя, как только я прокручиваю?

#javascript #jquery #css #navigation #sticky

Вопрос:

Я создал липкую навигационную панель, добавив динамический класс .sticky в CSS, и применил его к a conditional в jQuery.

Как только я начинаю прокручивать, выравнивание в навигационной панели меняется, и это также влияет на выравнивание только в пространстве героя.

Элементы списка на панели навигации смещаются вправо, и расстояние между ними увеличивается. Изображение пространства героя полностью смещается вправо, а текст слева также расширяется вправо. Поля слева остаются прежними.

Вот код ниже:

 $(document).ready(function(){
console.log("Your index.js file is loaded correctly!");
function fade() {
    $('.preloader').fadeOut("slow");
}
setTimeout(fade, 1000);


$(".viewProject").hover(function(){
    $(this).animate({
        width: "229px"
    });
}, function(){
    $(this).animate({
        width: "152px"
    });
});
//sticky nav here//
var stickyNav = $("header").offset().top; 
var sticky = function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop>stickyNav){
        $("header").addClass("sticky");
    }else {
        $("header").removeClass("sticky");
    }
}
sticky();
$(window).scroll(function(){
    sticky();
});
});
//this function works, but its alignment changes on scroll//
//hero image alignment also changes on scroll// 
 body {
  margin: 0;
}
/* navigation styling*/
.logo {
  height: 40px;
  width: 40px;
  padding-left: 124px;
}
a:visited {
  color:#222222;
}
header {
  background-color:rgba(255,255,255,.67);
  padding: 15px;
}
header ul {
  float: right;
  color: #222222;
  font-family: 'Raleway' sans-serif;
  font-size: 19px;
  padding-right: 124px;
}
header li {
  display: inline-block;
  padding: 0px 25px;
}
header p {
  display: inline-block;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100vw;
  overflow: none;
}
/*.sticky is a dynamic class I added and used it in the
js file in order to create a fixed nav menu*/
/*it works, but having some alignment issues with the 
nav bar itself and hero image (see js notes)*/

/* hero styling*/
.heroImg {
  margin-top: auto;
  background-color: #e0ebff;
  height: 633px;
  width:100%;
}
.heroContent {
  display: flex;
}
.heroContent h1 {
  font-family: 'Playfair Display', serif;
  font-size: 45px;
  font-weight: bold;
  margin-left: 139px;
  width: 100%;
  margin-top: 10vh;
}
#infoBlock {
  margin-top: 5vh;
}
.heroContent p {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  margin-left: 139px;
  line-height: 1.6;
}
.heroText {
  width: 75%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#heroPhoto{
  width: 25%;
}
#seeWork {
  margin-top: 15vh;
  color:black;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  border: none;
  font-weight: bold;
  background-color: white;
  padding: 15px;
  width: 229px;
  text-align: end;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Navigation-->
  <header>
      <img class=logo src="images/logo.svg">
      <ul>
        <a href="#myWork"><li id="work">Work</li></a>
        <a href="aboutme.html" id="about"><li>About</li></a>
        <a href="#myFooter"><li>Contact</li></a>
        <li>Resume</li>
      </ul>
  </header>


<!--Hero Image-->
<section class="heroImg">
  <div class="heroContent">
      <div class="heroText">
        <h1>Shalom, I'm Natalie!</h1>
        <p>UX/ UI designer, passionate about finding creative solutions that improve digital experiences</p>
        <p id="infoBlock">Currently based in Fort Collins, CO, I recently completed the University of Texas UX/ UI Bootcamp, where I applied user-centered design to real world situations. I enjoy every part of this iterative process, from user research to front-end-development.</p>
        <button id="seeWork">See My Work</button>
      </div>
      <div id="heroPhoto"><img src="images/pop art image me@2x.png[image moves all the way to the right of hero container and text also expands its with to the right of the container ][1]"></div>
    </div>
    </section>

Комментарии:

1. @The_Death_Raw В моем реальном файле я уже связал библиотеку jquery. <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> Я пошел дальше и добавил тот, который вы вставили вместо этого, но у меня все еще возникают проблемы с выравниванием.

Метки: ,