Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times

    How to remove jquery scrollfix class upon a narrow viewport


    Hi there,

    I've asked the following question on stackoverflow but I'm not getting much help there and I'm hoping the usual guys who have helped me before can assist:


    I'm using ScrollFix to fix my header upon scrolling. Although it's working 100% fine, I want to disable / remove the class ( .scroll-fix ) that this script adds to my header #header to disable the ScrollFix function WHEN my viewport is below a width of 768px.

    I know I can do it via media queries but to cut a long story short, it's just not working out and I think using a removeClass via javascript would obviously be the best choice... however after doing research online and attempting to do a removeClass with this script, I cannot seem to come right. I'm pretty sure it's quite simple.

    NOTE: I am not at all good with javascript so I just end up guessing most of the time.

    Here is my JS FIDDLE

    I'd appreciate your help, thanks

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    273
    Member #
    40099
    Liked
    47 times
    Problem can be solved on many ways.
    1. You can change id of element before calling scrollFix, lke:
    Code:
    if($(window).width() <= 768){
        $('#header').attr("id", "header_noScroll");
    }
    $('#header').scrollFix();
    2. call scrollFix only on larger window:
    Code:
    if($(window).width() > 768){
        $('#header').scrollFix();
    }
    3.set setInterval function to check style attribute
    Code:
    $('#header').scrollFix();
    setInterval(function(){ 
       if($("#header").attr("style") != "" || $("#header").attr("class") != ""){
            $("#header").attr("style", "");
           $("#header").attr("class", "");
    }, 1000);
    4. catch window resize:
    Code:
    $('#header').scrollFix();
    var mytime
    $(window).resize(function() {
        clearTimeout(mytime);
            mytime= setTimeout(
              function(){
                 if($(window).width() <= 768){
                       $("#header").attr("style", "");
                       $("#header").attr("class", "");
                 }else {
                       $("#header").attr("style", "position: fixed; top: 0px; width: 100%; left: 0px;");
                       $("#header").attr("class", "scroll-fix");
                 }
              }, 100);
        });
    5. react on scrolling event

    Code:
    $('#header').scrollFix();
    $( window ).scroll(function() {
      if($(window).width() <= 768){
          $("#header").attr("style", "");
          $("#header").attr("class", "");
      }else {
          $("#header").attr("style", "position: fixed; top: 0px; width: 100%; left: 0px;");
          $("#header").attr("class", "scroll-fix");
      }
    });

  4. #3
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    50975
    Google for css media query. This will do the trick for you without any javascript.

    Надіслано від мого Lenovo P70-A, використовуючи Tapatalk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 05:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com