Build a Personal Portfolio Webpage jQuery

I tried to use JQuery but it didn’t work.
Will, someone take a look at it, please?


User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36.

Link to the challenge:

How you want it to be look , what you want to correct man?

Other than the fact that you have a bunch of error (typos) in the code, you are also using it on a fixed element and the code only works for an element that moves on scroll.

If you use this code and set say your h1 to use the class fade-scroll you can see it work.

$(function() {
  var documentEl = $(document),
    fadeElem = $('.fade-scroll');

  documentEl.on('scroll', function() {
    var currScrollPos = documentEl.scrollTop();

    fadeElem.each(function() {
      var $this = $(this),
        elemOffsetTop = $this.offset().top;
      if (currScrollPos > elemOffsetTop)
        $this.css('opacity', 1 - (currScrollPos - elemOffsetTop) / 400);

I assume it is something like this you want?

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
        } else {

all my section are visible as it scrolls behind the nav-bar.
i don’t want them to be seen.

this one is to work on all my sections as they the top.

Either you have a very complicated solution to a very simple problem or I just don’t understand you correctly.

Sounds like you just need to remove the gap from above the nav? If so you can just add top: 0; to the .nav class selector.

.nav {
  top: 0;

Otherwise, if you do want the entire sections to fade out on scroll (which seems a bit weird) then the first code I posted should work.

  1. Replace the .fade-scroll with section.

  2. Don’t have your nav inside a section element (it doesn’t really belong inside a section anyway). Remove the section element surrounding the nav, then give your nav element the .nav class. Also, add z-index: 10 to it as well so the sections do not scroll on top of the nav.

1 Like

I will learn how to fade later. Thanks.