JAVASCRIPT   133

fixed Header Padding

Guest on 19th April 2022 01:23:19 AM

  1. $(document).ready(function() {
  2.  
  3.     fixedHeaderPadding();
  4.    
  5.    
  6.        
  7.    
  8.    
  9.     $(window).resize(function() {
  10.         if($('#hhps-anchors-section').length){
  11.             fixedHeaderPadding();
  12.             fixedAnchorLinks();
  13.         }
  14.     });
  15.  
  16.     $(document).scroll(function() {
  17.         if($('#hhps-anchors-section').length){
  18.             $(".hhpsAnchorLink").removeClass("active");
  19.             fixedAnchorLinks();
  20.             anchorLinkCheck();
  21.         }
  22.     });
  23.  
  24.     $(".hhpsAnchorLink").click(function(e) {
  25.         e.preventDefault();
  26.         if ($("#hhps-anchors-section").css("position") === "fixed") {
  27.             $('html, body').stop().animate({ scrollTop: $("#" + $(this).data("target")).offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 20 }, 1000);
  28.         } else {
  29.             $('html, body').stop().animate({ scrollTop: $("#" + $(this).data("target")).offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 80 }, 1000);
  30.         }
  31.         if (!isIe()) {
  32.             if (e.originalEvent.detail === 0) {
  33.                 $("#" + $(this).data("target")).focus();
  34.             }
  35.         }
  36.     });
  37.  
  38.     function fixedHeaderPadding() {
  39.         $('#breadcrumb-trail').css('margin-top', $('#nav-banner').outerHeight() + 'px');
  40.     }
  41.  
  42.     function fixedAnchorLinks() {
  43.         if (window.outerWidth >= 768) {
  44.             if ($(document).scrollTop() >= $("#hhps-anchors-section").offset().top - $('#nav-banner').outerHeight()) {
  45.                 $("#hhps-anchors-section").css({ position: "fixed", top: $('#nav-banner').outerHeight() + "px", "left": "0" });
  46.             } else {
  47.                 $("#hhps-anchors-section").css({ position: "relative", top: "0" });
  48.                 $(".hhps-anchors-section ul li button").removeClass("active");
  49.             }
  50.         }
  51.     }
  52.  
  53.     function anchorLinkCheck() {
  54.         $(".hhpsAnchorLink").removeClass("active");
  55.         if ($(document).scrollTop() >= $("#contactus").offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 90) {
  56.             $(".hhpsAnchorLink").removeClass("active");
  57.             $(".hhps-anchors-section ul li #contactusLink").addClass("active");
  58.         } else if ($(document).scrollTop() >= $("#admissions").offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 90) {
  59.             $(".hhpsAnchorLink").removeClass("active");
  60.             $(".hhps-anchors-section ul li #admissionsLink").addClass("active");
  61.         } else if ($(document).scrollTop() >= $("#faculty").offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 90) {
  62.             $(".hhpsAnchorLink").removeClass("active");
  63.             $(".hhps-anchors-section ul li #facultyLink").addClass("active");
  64.         } else if ($(document).scrollTop() >= $("#highlights").offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 90) {
  65.             $(".hhpsAnchorLink").removeClass("active");
  66.             $(".hhps-anchors-section ul li #highlightsLink").addClass("active");
  67.         } else if ($(document).scrollTop() >= $("#curriculum").offset().top - $('#nav-banner').outerHeight() - $("#hhps-anchors-section").outerHeight() - 90) {
  68.             $(".hhpsAnchorLink").removeClass("active");
  69.             $(".hhps-anchors-section ul li #curriculumLink").addClass("active");
  70.         } else {
  71.             $("#hhps-anchors-section").css({ position: "relative", top: "0" });
  72.             $(".hhps-anchors-section ul li button").removeClass("active");
  73.         }
  74.     }
  75.  
  76.     function isIe() {
  77.         return window.navigator.userAgent.indexOf("MSIE ") > 0 ||
  78.             !!navigator.userAgent.match(/Trident.*rv\:11\./);
  79.     }
  80.    
  81.     var degreesDiv, degreesButtonDiv, fullHeight;
  82.    
  83.     if ($('#hhops-degrees').length) {
  84.         moreLess();
  85.     }
  86.    
  87.     $(window).resize(function() {
  88.         if ($('#hhops-degrees').length) {
  89.             moreLess();
  90.         }
  91.     });
  92.  
  93.     $("#seeDegrees").click(function(e) {
  94.         if (degreesButtonDiv.hasClass("more")) {
  95.             degreesButtonDiv.removeClass("more");
  96.             degreesDiv.css({ height: "500px" });
  97.             $("#seeDegreesSpan").text("More");
  98.         } else {
  99.             degreesButtonDiv.addClass("more");
  100.             degreesDiv.css({ height: fullHeight + "px" });
  101.             $("#seeDegreesSpan").text("Less");
  102.         }
  103.     });
  104.  
  105.     function moreLess() {
  106.         degreesDiv = $("#hhops-degrees");
  107.         degreesDiv.css({ height: "auto" });
  108.         degreesButtonDiv = $("#hhops-seeDegrees-container");
  109.         fullHeight = degreesDiv.height();
  110.         if ($(window).width() > 767) {
  111.             console.log(">>>>");
  112.             $("#seeDegreesSpan").text("More");
  113.             degreesButtonDiv.removeClass("more");
  114.             degreesDiv.css({ height: "500px" });
  115.         } else {
  116.             console.log("<<<<");
  117.             degreesButtonDiv.addClass("more");
  118.             $("#seeDegreesSpan").text("Less");
  119.             degreesDiv.css({ height: "auto" });
  120.         }
  121.     }
  122. });

Raw Paste


Login or Register to edit or fork this paste. It's free.