Retrieving Variable Display Locations in jQuery

Asked 2 years ago, Updated 2 years ago, 124 views

On the page where the display position changes,
When I scroll to the navigation position, I wanted to fix it to the top of the window, so I wrote the code below.

https://jsfiddle.net/aq8j1rLL/9/

$(function(){

  $(window).on('load resize', function(){

    var navScrollHeight=$('#gnav') .offset().top;

    $(window).on('scroll', function(){
      if($(this).scrollTop()>navScrollHeight){
        $('#gnav').addClass('fixed');
      } else{
        $('#gnav').removeClass('fixed');
      };
    });

  });

});
html,
body{
  width: 100%;
  height —100%;
  margin:0;
  padding:0;
}

# container {
  width: 100%;
  height —2000px;
  background-color:grey;
}

header{
  position:relative;
}

h1{
  width: 100%;
  height —300px;
  background-color:white;
  margin:0;
}

#gnav{
  width: 100%;
  height —70px;
  background-color:black;
  z-index:1000;
}

.fixed{
  position:fixed;
  top:0;
  left:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<divid='container'>
  <header>
    <h1>/h1>
    <navid="gnav"></nav>
  </header>
</div>

If you change the size of the window before the navigation is fixed, it will be fixed in the navigation position. If you change the size of the window after it is fixed, the navigation system will suddenly disappear, or it will be fixed or unstable in a different position.

I am a beginner and have tried many things, but I have no idea.

I look forward to your kind cooperation.

jquery

2022-09-30 21:21

1 Answers

I read your comment.I will replace the original code with the answer:

https://jsfiddle.net/uztqeoe8/3/

$(function(){
  // This event appears unnecessary
  // $(window).on('load resize', function(){

  // Let's cache jQuery objects that don't change dynamically.
  var$window=$(window);
  var$gnav=$('#gnav');
  var$socialLink=$('#social-link');

  var navScrollHeight=$gnav.offset().top;

  $window.on('scroll', function(){
    if($window.scrollTop()>navScrollHeight){

      $gnav.addClass('fixed');

      // CSS changes should be configured with CSS instead of JavaScript as much as possible.

      // I didn't really understand the intention of this, so I left it as it is.Similarly, if CSS is available, I recommend it.
      // Add Icon Margin
      $socialLink.css({
        'margin-top': '106px'
      });
    } else{

      $gnav.removeClass('fixed');

      // icon margin cancellation
      $socialLink.css({
        'margin-top': 0
      });
    };
  });
  //});
});
html,
body{
  width: 100%;
  height —100%;
  margin:0;
  padding:0;
}

body{
  font: 12px "Yugothic", sans-serif;
  color:black;
  position:relative;
}

div#container{
  position:relative;
  width: 100%;
  height —100%;
}

header{
  position:relative;
  width: 100%;
  height —100%;
  text-align:center;
  background-color:grey;
}

header.img-fixed {
  background: url("../images/photo.jpg") no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

header section {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin —auto;
  width: 100%;
  height —50%;
}

header section h1 {
  width —300px;
  height —221px;
  text-indent —100%;
  white-space:nowrap;
  overflow — hidden;
  background-color:black;
  background-size: 100% 100%;
  margin:0 auto21px;
}

#gnav{
  width: 100%;
  height —70px;
  margin-bottom —15px;
  z-index:1000;
  background-color:rgba(255,0,100,0);
  transition —0.3ase-in-out;
}

#gnav.fixed{
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(255,0,100,0.5);
}

#gnavul{
  margin:0;
  padding —26px00;
  display:flex;
  justify-content:center;
}

li{
  list-style-type: none;
}

#gnavulia{
  position:relative;
  margin:020px;
  font —18px/25.5px sans-serif;
  display:block;
  text-decoration: none;
}

#social-link {
  text-align:center;
  margin-left: -2.5px;
}

#social-link ulli {
  display:inline-block;
}

# social-link ulia {
  width —35px;
  height —35px;
  display:block;
  background-color:black;
}

main{
  width: 100%;
  height —2000px;
  background-color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<divid='container'>

  <header class="img-fixed">
    <section>
      <h1>mydesign</h1>
      <navid="gnav">
        <ul>
          <li><a href="#view-concept">CONCEPT>span>/span><a><li>;
          <li><a href="#view-menu">MENU>span>/span><a><li>;
          <li><a href="#view-about">ABOUT>span>/span><a><li>;
          <li><a href="#view-reserve">RESERVE>span>/span><a><li>;
        </ul>
      </nav>
      <aside id="social-link">
        <ul>
          <li>
            <a href="https://www.facebook.com/" target="_blank">/a>
          </li>
          <li>
            <a href="https://www.instagram.com/" target="_blank">/a>
          </li>
        </ul>
      </aside>
    </section>
  </header>
  <main>/main>
</div>

Looking at the code, it seemed that there were many unnecessary parts.

  • The offset coordinates of the DOM do not change (probably) with the window resize, so if the DOM configuration does not change dynamically, it can be determined when it is loaded.
  • This may be due to the fact that you are configuring the scroll event handler within the load/resize event.An additional scroll event handler registers each time this event fires.This is not only unnecessary, but can also cause processing conflicts and performance degradation and should be removed.

Based on the above, I have rewritten it.

Additional information

I updated it like this.https://jsfiddle.net/s5d6yhh3/

$(function(){
  // This event appears unnecessary
  // $(window).on('load resize', function(){

  // Let's cache jQuery objects that don't change dynamically.
  var$window=$(window);
  var$gnav=$('#gnav');
  var$socialLink=$('#social-link');

  var fixedClassName = 'fixed';
  var navScrollHeight=$gnav.offset().top;

  $window.on('resize', function(){
    if($gnav.hasClass(fixedClassName)){
      $gnav.removeClass(fixedClassName);
      navScrollHeight=$gnav.offset().top;
      $gnav.addClass(fixedClassName);
    } else{
      navScrollHeight=$gnav.offset().top;
    }
  });

  $window.on('scroll', function(){
    if($window.scrollTop()>navScrollHeight){
      $gnav.addClass(fixedClassName);
      // CSS changes should be configured with CSS instead of JavaScript as much as possible.
    } else{
      $gnav.removeClass(fixedClassName);
    };
  });
  //});
});
html,
body{
  width: 100%;
  height —100%;
  margin:0;
  padding:0;
}

body{
  font: 12px "Yugothic", sans-serif;
  color:black;
  position:relative;
}

div#container{
  position:relative;
  width: 100%;
  height —100%;
}

header{
  position:relative;
  width: 100%;
  height —100%;
  text-align:center;
  background-color:grey;
}

header.img-fixed {
  background: url("../images/photo.jpg") no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

header section {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin —auto;
  width: 100%;
  height —50%;
}

header section h1 {
  width —300px;
  height —221px;
  text-indent —100%;
  white-space:nowrap;
  overflow — hidden;
  background-color:black;
  background-size: 100% 100%;
  margin:0 auto21px;
}

#gnav{
  width: 100%;
  height —70px;
  margin-bottom —15px;
  z-index:1000;
  background-color:rgba(255,0,100,0);
  transition —0.3ase-in-out;
}

#gnav.fixed{
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(255,0,100,0.5);
}

#gnavul{
  margin:0;
  padding —26px00;
  display:flex;
  justify-content:center;
}

li{
  list-style-type: none;
}

#gnavulia{
  position:relative;
  margin:020px;
  font —18px/25.5px sans-serif;
  display:block;
  text-decoration: none;
}

#gnav.fixed+#social-link{
  margin-top —106px;
}

#social-link {
  text-align:center;
  margin-left: -2.5px;
}

#social-link ulli {
  display:inline-block;
}

# social-link ulia {
  width —35px;
  height —35px;
  display:block;
  background-color:black;
}

main{
  width: 100%;
  height —2000px;
  background-color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<divid='container'>

  <header class="img-fixed">
    <section>
      <h1>mydesign</h1>
      <navid="gnav">
        <ul>
          <li><a href="#view-concept">CONCEPT>span>/span><a><li>;
          <li><a href="#view-menu">MENU>span>/span><a><li>;
          <li><a href="#view-about">ABOUT>span>/span><a><li>;
          <li><a href="#view-reserve">RESERVE>span>/span><a><li>;
        </ul>
      </nav>
      <aside id="social-link">
        <ul>
          <li>
            <a href="https://www.facebook.com/" target="_blank">/a>
          </li>
          <li>
            <a href="https://www.instagram.com/" target="_blank">/a>
          </li>
        </ul>
      </aside>
    </section>
  </header>
  <main>/main>
</div>
  • I didn't reproduce it, but if you want to do something about it when resizing it, I think you can do it by updating the variables placed in the appropriate scope instead of adding a scroll event handler here again.
  • In this case, the CSS change of #social-link can also be implemented in the style sheet.I wrote it as an example, so please check it for your reference.
  • There are various opinions about whether jQuery objects should be cached or not, and the smaller the code is almost within the error range, so it might be too much to be nervous and put everything in the variable.However, in my personal opinion, it is troublesome to simply write $('selector') over and over again, so I think it is highly recommended (as a variable, it is more likely that it will be supplemented).

Also, since the content has become both this and that, if you have any additional questions, you may be able to hear the opinions of many people if you ask them as a lot of questions.

2022-09-30 21:21

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

916 When building Fast API+Uvicorn environment with PyInstaller, console=False results in an error

613 GDB gets version error when attempting to debug with the Presense SDK (IDE)

573 rails db:create error: Could not find mysql2-0.5.4 in any of the sources

578 Understanding How to Configure Google API Key

582 PHP ssh2_scp_send fails to send files as intended

© 2024 OneMinuteCode. All rights reserved.