https://www.ushorizon.com/_ui/responsive/common/js/crl.pinnedpagenav.js

1// Pinned Page Navigation Function
2function pinnedPageNav() {
3
4    // Collect parent divs for navigation and image areas
5    let mainNavLinks = document.querySelectorAll(".pinned-nav ul li a");
6    let mainSections = document.querySelectorAll(".case-section");
7    let caseImageSections = document.querySelectorAll(".case-image-section");
8    let pinnedNav = document.getElementById("pinned-nav");
9
10    let lastId;
11    let cur = [];
12
13    // This should probably be throttled.
14    // Especially because it triggers during smooth scrolling.
15    // https://lodash.com/docs/4.17.10#throttle
16    // You could do like...
17    // window.addEventListener("scroll", () => {
18    //    _.throttle(doThatStuff, 100);
19    // });
20    // Only not doing it here to keep this Pen dependency-free.
21
22    //console.log(mainNavLinks);
23    //console.log(mainSections);
24    //console.log(caseImageSections);
25
26    window.addEventListener("scroll", event => {
27
28        let fromTop = window.scrollY;
29        let addLightPinnedTheme = false;
30
31        // These variables help the pinned nav change styles at the appropiate time over images and sections
32        let pinnedNavHeight = $("#pinned-nav").height();
33        let navTopHeight = $("header").height();
34
35        // Check which section should be highlighted with the class current
36        mainNavLinks.forEach(link => {
37            let section = document.querySelector(link.hash);
38
39            if (
40                section.offsetTop - navTopHeight <= fromTop &&
41                section.offsetTop + section.offsetHeight - navTopHeight > fromTop
42            ) {
43                link.classList.add("current");
44                //console.log("add current");
45            } else {
46                link.classList.remove("current");
47                //console.log("remove current");
48            }
49        });
50
51        // Set the addLightPinnedTheme boolean when over image
52        caseImageSections.forEach(image => {
53
54            if (
55                image.offsetTop - 200 - pinnedNavHeight <= fromTop &&
56                image.offsetTop + image.offsetHeight - 200 - pinnedNavHeight > fromTop
57            ) {
58                addLightPinnedTheme = true;
59            }
60        });
61
62        // Add Light theme to pinned navigation when over images
63        if (pinnedNav) {
64
65            if (addLightPinnedTheme) {
66                pinnedNav.classList.add("light-pinned-theme");
67                //console.log("add light class");
68            } else {
69                pinnedNav.classList.remove("light-pinned-theme");
70                //console.log("remove light class");
71            }
72        }
73
74
75
76    });
77}
78
79
80
81
82
83$(document).ready(function(){
84    $("#image-gallery-modal").removeClass("cboxElement");
85
86
87    // Function to create pinned nav list items.
88    $( ".case-section" ).each(function() {
89
90        let caseSectionId = this.id;
91        let caseSectionValue = $(this).attr('value');
92
93        //$("#pinned-nav ul").append("<li><a href='#" + caseSectionId + "'>" + caseSectionValue + "</a></li>");
94        $("#pinned-nav ul").append("<li><a href='#" + caseSectionId + "'><span>" + caseSectionValue + "</span> <span class='circle-container'><span class='outer-circle'></span><span class='inner-circle'></span></span></a></li>");
95    });
96
97    // Remove cBoxElement
98    $('#image-gallery-modal').on('show.bs.modal', function (e) {
99        console.log("Clicckkcekerkd");
100        console.log(e.relatedTarget);
101        console.log(e.relatedTarget.dataset);
102        console.log(e.relatedTarget.dataset.toggle);
103        console.log(e.relatedTarget.dataset.image);
104        $(".image-gallery-modal-container .image-gallery-indicators li[data-image='" + e.relatedTarget.dataset.image + "']").first().addClass("active");
105        $(".image-gallery-modal-container .image-gallery-carousel .item[data-image='" + e.relatedTarget.dataset.image + "']").first().addClass("active");
106        $(".image-gallery-modal-container .carousel-control").removeClass("disabled");
107    });
108
109    // Remove cBoxElement
110    $('#image-gallery-modal').on('shown.bs.modal', function (e) {
111        $("#image-gallery-modal").removeClass("cboxElement");
112    });
113
114    $('#image-gallery-modal').on('hidden.bs.modal', function (e) {
115        $(".image-gallery-modal-container .image-gallery-indicators li").removeClass("active");
116        $(".image-gallery-modal-container .image-gallery-carousel .item").removeClass("active");
117    });
118
119    // Image gallery modal creation
120    let imageCount = 0;
121    $( ".CaseStudy__Image" ).each(function() {
122
123        let imageUrl = $(this).find("img").attr('src');
124        let imageCaption = $(this).find(".image-caption").text();

125        //<li data-target="#carousel" data-slide-to="1" class=""><img src="" class="d-block w-100"></li>
126        $(".image-gallery-modal-container .image-gallery-indicators").append('<li data-target="#carousel" data-slide-to="' + imageCount + '" class="" data-image="' + imageUrl + '"><img src="' + imageUrl + '" class="d-block w-100"></li>');
127        $(".image-gallery-modal-container .image-gallery-carousel").append('<div class="item" data-image="' + imageUrl + '" ><img src="' + imageUrl + '" class="d-block w-100"><p>' + imageCaption + '</p></div>');
128
129        imageCount++
130    });
131
132    // Fire pinnedPageNav function after nav list items are created.
133    pinnedPageNav();
134
135});