0

I'm trying to append a tab into my sites header and then change the text content on scroll so that the text content of the div matches the section on the page. Even though I'm new to JS I actually have this working with the following code:

JS:

<script>
jQuery( ".menu-column" ).append( "<p>ABOUT</p>" );
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>530)
     {
        jQuery('.menu-column p').html("ABOUT");
     }
 });
});
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>1450)
     {
        jQuery('.menu-column p').html("CS17");
     }
 });
});
</script>

-

<script>
jQuery( document ).ready(function() {
   jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>2300)
     {
        jQuery('.menu-column p').html("ABYF");
     }
 });
});
</script>

-

Note: I am aware that separating sections of JS code like this is not the best way to include JS in a page.

-

CSS:

.menu-column p {
    margin-left: 30px;
    margin-top: 10px;
    width: 200px;
    padding: 10px 10px 10px 10px;
    display: none;
    float: left;
    font-size: 11px;
    color: #a7a7a7;
    transition: 0.3s all;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    -ms-transition: 0.3s all;
}
@media screen and (max-width: 768px) {
.menu-column p {
    display: none!important;
}
}

.menu-items-blocks {
    float: right!important;
}

.menu-bar {
    margin-top: 8px;
}

My Issue:

This works perfectly on 15" Macbook Pro (designed on this device) but when I resize the browser even slightly, all of my scroll positions are 'destroyed' (i.e out of line) - I presume this is because I need some form of variable parameter or maybe this just isn't the correct way of achieving this functionality.

I've tried to adapt other answers but I can't get anything to work, can anyone point me in the right direction?

  • in this case it would make far more sense to select the element you want to scroll to, then use it's `offset().top`. Then you can get rid of all the difference `scroll()` handlers you have and use a single one – Rory McCrossan Jan 10 '18 at 17:00
  • @RoryMcCrossan thanks for the direction, I'm looking into this option now –  Jan 10 '18 at 17:05
  • Here you go: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Rory McCrossan Jan 10 '18 at 17:09

0 Answers0