JanetTTT

On 10/5/2021 at 5:21 AM, zzlogan said:

I tried this, and it is working

 

/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  right: 0em; /* Position them outside of the screen */
  //transition: .1s; /* Add transition on hover */
  padding: 10px; /* 15px padding */
  position: fixed;
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 15px;
  color: #ebb646; //#ffad77
  //border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
  z-index: 7990; 
}

#mySidenav a:hover {
  right: .444em; /* On mouse-over, make the elements appear as they should */
}
/* The about link: 20px from the top with a green background */
#supload {
  top: 370px;
  //background-color: #04AA6D;
}
#sos {
  top: 400px;
  //background-color: #2196F3; /* Blue */
}
#govote {
  top: 430px;
  //background-color: #2196F3; /* Blue */
}
#solarstates {
  top: 460px;
  //background-color: #f44336; /* Red */
}
#neuronnectar {
  top: 490px;
  //background-color: #555 /* Light Black */
}
#rdoor {
  top: 520px;
  //background-color: #555 /* Light Black */
}
#aboutme {
  top: 550px;
  //background-color: #555 /* Light Black */
}

@media screen and (max-width:740px){
  #block-yui_3_17_2_1_1632919836480_17663{
  display:none;
}}

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

with these code injections

Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-menu-nav-item a').click(function(){
    $('body').removeClass('header--menu-open');
    $('button.header-burger-btn.burger').click();
  });
})
</script>

Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      // Store hash
      var hash = this.hash;
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 100, function(){
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

 

This is working well, only thing is finding a way to change the font color when the text glides over a new background color.  I have tried invert, but it only works with static text, not when I scroll down the page the text just stays the same color.

Would anyone know how to change the text color when scroll into a new section?

 

@tuanphan @bangank36 @creedon

@zzloganHey, Zac! Thanks for your code! I am totally new in square space. I have three questions.

1. Should I create anchor link first? then I put code in it?

2.for first code, should I drop it into custom CSS?

3.I checked your website. You have a pop up effect. It looks awesome! How do you make it?

Thank you so much!