将计算出的jQuery值/变量赋予css类

Question

我得到了下面的Navbar。我想让它做的是：

1. 向下滚动时出现
2. 再次向上滚动时离开视图（到定义的数量）
3. 用箭头“关闭”导航条，使其变小
4. 在“关闭”后“重新打开”导航栏
5. 在任何时候，我仍然希望navbar在滚动到顶部时隐藏。无论它是扩展还是压缩

这不起作用，因为我的切换navbar的代码将为top设置内联值，这是类中需要的，以便在向上滚动时隐藏它

所以，除了我的代码有什么问题之外，真正的问题是：

有没有办法把我计算出来的身高给CSS？或者不内联设置样式，而是定义一个新的类或其他东西，并给该类赋值？

所以我仍然可以在css中有一些顺序，并且向上滚动时的隐藏不会被内联样式覆盖。

谢谢你的帮助！

null

// Sticky Header / Appear when scrolled to XY

$(window).scroll(function() {
  var header_sticky = $('.header-sticky');

  if ($(this).scrollTop() > 250) {
    header_sticky.addClass('fixed');
  } else {
    header_sticky.removeClass('fixed');
  }
});


// Hide / Show Navbar

$(function() {

  $('#nav_toggle').on('click', function() {

    toggleNav();
  });
});


function toggleNav() {

  let navHeight = $('.header-sticky.toggleable').height();
  let anchorHeight = $('#nav_toggle').height();
  let toggleHeight = navHeight - anchorHeight;


  if ($('#nav_toggle').parent().hasClass('nav_toggled')) {
    $('#nav_toggle').parent().css('top', 0);
    $('#nav_toggle').parent().removeClass('nav_toggled')
    $('#nav_toggle').html('<i class="fas fa-angle-down"></i>')
  } else {
    $('#nav_toggle').parent().addClass('nav_toggled')
    $('#nav_toggle').parent().css('top', -toggleHeight);
    $('#nav_toggle').html('<i class="fas fa-angle-up"></i>')
  }
}

/* Nav Styling */
.nav {
  width: 100vw;
  padding: 0 10vw;
  position: fixed;
  background: #fefefe;
  z-index: 8;
  left: 0;
  right: 0;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
}

.nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.nav ul li {
  padding: 0.5rem 1rem;
}

/* Toggle Styling */

#nav_toggle {
  font-size: 1.5rem;
  text-align: center;
  width: 2rem;
  height: 100%;
  display: block;
  margin: 0 auto;
}

/* Sticky Header CSS */

.header-sticky {
  position: fixed;
  z-index: 1000;
  top: -250px;
  transition: all ease-in-out .25s;
}
.header-sticky.fixed {
  top: 0;
}

  

/* Some height so it's scrollable */
.for_some_height {
  height: 200vw;
  width: 100%;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="nav header-sticky toggleable">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <a href="javascript:void(0)" id="nav_toggle"><i class="fas fa-angle-down"></i></a>
</div>
<div class="for_some_height"></div>

null

Answer 1

它完成了,检查是否需要其他东西,然后我会在解决方案中添加一些解释,

null

// Sticky Header / Appear when scrolled to XY
$(window).scroll(function() {
  var header_sticky = $('.header-sticky');
  if ($(this).scrollTop() > 250) {
    header_sticky.addClass('fixed');
  } else {
    header_sticky.removeClass('fixed');
  }
});

// Hide / Show Navbar

$(function() {
  $('#nav_toggle').on('click', function() {
      $(this).prev('ul').slideToggle();
      $(this).toggleClass('closed');
      if($('#nav_toggle').hasClass('closed')){
        $('#nav_toggle').html('<i class="fas fa-angle-up"></i>');
      }else {
        $('#nav_toggle').html('<i class="fas fa-angle-down"></i>');
      }
  });
});

/* Nav Styling */
.nav {
  width: 100vw;
  padding: 0 10vw;
  position: fixed;
  background: #fefefe;
  z-index: 8;
  left: 0;
  right: 0;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
}

.nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.nav ul li {
  padding: 0.5rem 1rem;
}

/* Toggle Styling */

#nav_toggle {
  font-size: 1.5rem;
  text-align: center;
  width: 2rem;
  height: 100%;
  display: block;
  margin: 0 auto;
}

/* Sticky Header CSS */

.header-sticky {
  position: fixed;
  z-index: 1000;
  top: -250px;
  transition: all ease-in-out .25s;
}
.header-sticky.fixed {
  top: 0;
}

  

/* Some height so it's scrollable */
.for_some_height {
  height: 200vw;
  width: 100%;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="nav header-sticky toggleable">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <a href="javascript:void(0)" id="nav_toggle"><i class="fas fa-angle-down"></i></a>
</div>
<div class="for_some_height"></div>