I'm trying to make scrollable and clickable section but its scroll and onclick scroll not working

Question

please review below code as i want to make one side menu sticky and on right side its content will scroll and same can access through click on menu. I'm having an issues with active scrolling and onclick scroll.

<div class="section--150 wf-section">
    <div class="container w-container w-row scroll-container">
      <div class="navigation column-95 w-col w-col-6" id="mainNav">
        <a class="navigation__link scroll-title-div active" href="#1">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">What is</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#2">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Why you should choose?</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#3">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Process</h3>
        </a>
      </div>
      <div class="sub-scroll-div w-row">
        <div class="page-section hero w-col w-col-6 first-scroll-content forScrollJs" id="1">
          <div class="div-block-61" id="firstScrollTagContent">
            <h2 class="scroll-h2 medium">What is</h2>
            <p class="font---16">allowing them to build a great eCommerce experience.</p>
          </div>
        </div>
        <div class="page-section w-col w-col-6 second-scroll-content forScrollJs" id="2">
          <div class="div-block-61" id="secondScrollTagContent">
            <h2 class="scroll-h2 medium">Why you should choose?</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Responsive</h3>
              <p class="font---16">allowing them to build a great eCommerce experience.</p>
            </div>
            </div>
        </div>
        <div class="page-section w-col w-col-6 third-scroll-content forScrollJs" id="3">
          <div class="div-block-61" id="thirdScrollTagContent">
            <h2 class="scroll-h2 medium">Process</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Understanding</h3>
              <p class="font---16">By discussing clients’ business goals and understanding the user needs and the
                problematic areas we’ll build strategies that serve both with No-code.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS /* scrolling plug-in */

.scroll-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .page-section { max-height: max-content; width: 100%; margin-bottom: 5%; } .sub-scroll-div { width: 50%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; } .first-scroll-content { margin-top: 0px; } .navigation { display: block; position: sticky; width: 50%; margin-bottom: auto; margin-right: auto; } .navigation__link { top: 39px; color: black; text-decoration: none; font-weight: 400; } .navigation__link:hover { color: #3f71ff; } .navigation__link.active { color: #3f71ff; } .navigation__link.active .active-blue-arrow { display: block; opacity: 1; }

script

$(document).ready(function() {
        $('.forScrollLink').bind('click', function(e) {
        console.log("clicked");
                e.preventDefault(); // prevent hard jump, the default behavior
                var target = $(this).attr("href"); // Set the target as variable
                $('html, body').stop().animate({
                        scrollTop: $(target).offset().top
                }, 500, function() {
                        location.hash = target; 
                });
                return false;
        });
  });
  $(window).scroll(function() {
      var scrollDistance = $(window).scrollTop();
      $('.page-section').each(function(i) {
          if ($(this).position().top <= scrollDistance) {
              $('.navigation a.active').removeClass('active');
              $('.navigation a').eq(i).addClass('active');
          }
      });
  }).scroll();

Help me to make it done..

Thanks in advance !!!

Aneeb · Accepted Answer · 2022-06-02 14:51:18Z

position fixed used to do that margin-left to use to avoid overridden div replace this section of CSS

        $(document).ready(function () {
            $('.forScrollLink').bind('click', function (e) {
                console.log("clicked");
                e.preventDefault(); // prevent hard jump, the default behavior
                var target = $(this).attr("href"); // Set the target as variable
                $('html, body').stop().animate({
                    scrollTop: $(target).offset().top
                }, 500, function () {
                    location.hash = target;
                });
                return false;
            });
        });
        $(window).scroll(function () {
            var scrollDistance = $(window).scrollTop();
            $('.page-section').each(function (i) {
                if ($(this).position().top <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
                }
            });
        }).scroll();

.scroll-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .page-section {
            max-height: max-content;
            width: 100%;
            margin-bottom: 5%;
        }

        .sub-scroll-div {
            width: calc(100% - 50%);
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            align-items: center;
            margin-left: 50%;
        }

        .first-scroll-content {
            margin-top: 0px;
        }

        .navigation {
            display: block;
            width: 50%;
            margin-bottom: auto;
            margin-right: auto;
            position: fixed;
            top: 0;
        }

        .navigation__link {
            top: 39px;
            color: black;
            text-decoration: none;
            font-weight: 400;
        }

        .navigation__link:hover {
            color: #3f71ff;
        }

        .navigation__link.active {
            color: #3f71ff;
        }

        .navigation__link.active .active-blue-arrow {
            display: block;
            opacity: 1;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section--150 wf-section">
        <div class="container w-container w-row scroll-container">
            <div class="navigation column-95 w-col w-col-6" id="mainNav">
                <a class="navigation__link scroll-title-div active" href="#1">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">What is</h3>
                </a>
                <a class="navigation__link scroll-title-div" href="#2">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">Why you should choose?</h3>
                </a>
                <a class="navigation__link scroll-title-div" href="#3">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">Process</h3>
                </a>
            </div>
            <div class="sub-scroll-div w-row">
                <div class="page-section hero w-col w-col-6 first-scroll-content forScrollJs" id="1">
                    <div class="div-block-61" id="firstScrollTagContent">
                        <h2 class="scroll-h2 medium">What is</h2>
                        <p class="font---16">allowing them to build a great eCommerce experience.</p>
                    </div>
                </div>
                <div class="page-section w-col w-col-6 second-scroll-content forScrollJs" id="2">
                    <div class="div-block-61" id="secondScrollTagContent">
                        <h2 class="scroll-h2 medium">Why you should choose?</h2>
                        <div class="scroll-content-div">
                            <h3 class="font-25 medium">Responsive</h3>
                            <p class="font---16">allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="page-section w-col w-col-6 third-scroll-content forScrollJs" id="3">
                    <div class="div-block-61" id="thirdScrollTagContent">
                        <h2 class="scroll-h2 medium">Process</h2>
                        <div class="scroll-content-div">
                            <h3 class="font-25 medium">Understanding</h3>
                            <p class="font---16">By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.sub-scroll-div {
        width: calc(100% - 50%);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        margin-left: 50%;
    }

Yes but the same thing isn't working in my file.. Thanks for helping me..

Alap Joshi · Accepted Answer · 2022-06-08 06:28:02Z

Below changes are made in J.script to make it functional..

<script>
var firstDiv = $(".forScrollLink").closest(".scroll_section").offset().top + 20;
var secondDiv = firstDiv + $(".first-scroll-content").height();
var ThirdDiv = secondDiv + $(".second-scroll-content").height() + 50;

const sections = document.querySelectorAll(".forScrollJs");
$('body').scroll(() => {
  navHighlighter()
}).scroll();
function navHighlighter() {
  var windscroll = $('body').scrollTop();
  // Get current scroll position
  let scrollY = windscroll;
  // console.log("scrollY",scrollY);
  // Now we loop through sections to get height, top and ID values for each
  sections.forEach(current => {
    const sectionHeight = current.offsetHeight;
    const sectionTop = current.offsetTop - 50;
    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      var section_id = $(current).attr('id');
      // document.querySelectorAll('.forScrollJs').removeClass('active');
      $(".navigation").find('.forScrollLink').removeClass('active');
      $('.navigation .forScrollLink').each(function (ind) {
        if (ind == section_id - 1) {
          $('.navigation .forScrollLink').eq(ind).addClass('active');
        }
      });
    }
  });
}

$("#firstLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: firstDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#firstLink").addClass('active');
  });
});

$("#secondLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: secondDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#secondLink").addClass('active');
  });
});

$("#thirdLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: ThirdDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#thirdLink").addClass('active');
  });
});

Collectives™ on Stack Overflow

I'm trying to make scrollable and clickable section but its scroll and onclick scroll not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related