Build a Personal Portfolio Webpage jQuery

HTML-CSS
1

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

Chrome

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:

2

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

3

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');
    console.log(fadeElem)

  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);
    });
  });
});
4

I assume it is something like this you want?

  
$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
            $('.nav').fadeOut(500);
        } else {
            $('.nav').fadeIn(500);
        }
    });
});
5

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

6

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

7

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
8

I will learn how to fade later. Thanks.