Retrieving Variable Display Locations in jQuery

Asked 1 years ago, Updated 1 years ago, 113 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

513 The method of the class of the application that I am creating in Typescript does not work as I expected.

546 Scrap text information after the "View More" button when searching in the Yahoo! News search window

535 Unable to install versioned in Google Colab

541 Who developed the "avformat-59.dll" that comes with FFmpeg?

536 PHP ssh2_scp_send fails to send files as intended

© 2024 OneMinuteCode. All rights reserved.