https://www.mitas-tires.com/-/media/themes/trelleborg/global/trell…?rev=a04fbefe85e14a269e8384bf7639660f

1var startManualScroll = false;
2var timeOutInpage;
3var previousScroll = 0;
4var currentScrollDirection = "";
5$xa(document).ready(function () {
6    var translateAreYouLooking=$xa('#tb-Navigation-Are-youlookingforThis').text();
7    $xa('.tb-inpagenav--desc').text(translateAreYouLooking);
8    //Indentify scroll direction
9    $xa(window).scroll(function () {
10        var currentScroll = $xa(this).scrollTop();
11 
12        if (currentScroll > previousScroll) {
13            currentScrollDirection = 'down';
14        } else {
15            currentScrollDirection = 'up'; 
16        }
17
18        previousScroll = currentScroll;
19    }); //on scroll check if position of 
20    //inpagenav is already reached
21
22    $xa(window).scroll(function () {
23        _stickyControll();
24    });
25
26    //on resize of browser window
27    //check inpage nav position and stickyness
28    //again
29
30    window.addEventListener('resize', function () {
31        _stickyControll(true);
32
33        _setContainerWidth();
34    });
35
36    $xa(document).on("DOMSubtreeModified", "body", function () {
37        _stickyControll(true);
38    });
39
40    _inPageShrink();
41
42    _initInPageNav($xa('main h2.tb-sectionintro-title'));
43   _initInPageNav($xa('.tb-inpage-navigation').find('.tb-inpage-headline:not(h2.tb-sectionintro-title)'))
44
45   // _initInPageNav();
46}); //we use an inteval here to check when document
47//is really rendered, then only we call the methods
48
49var _setContainerWidth = function _setContainerWidth() {// $xa('.tb-inpagenav-container').css({
50    //   "minWidth": $xa('.breadcrumb-new').outerWidth()
51    // });  
52};
53
54var interval = setInterval(function () {
55    if (document.readyState === 'complete') {
56        _stickyControll();
57
58        clearInterval(interval);
59    }
60}, 100);
61/**
62 *
63 * Controls the stickyness of
64 * the inpage navigation
65 *
66 */
67
68var _stickyControll = function _stickyControll(calledFromResize) {
69    if (typeof calledFromResize === 'undefined') {
70        calledFromResize = false;
71    }
72
73    var $inpageNav = $xa('.tb-inpagenav');
74    var $container = $xa('.tb-inpagenav-container');
75    var scrollPos = $xa(window).scrollTop();
76    var headerHeight = $xa('.tb-header-container').outerHeight();
77
78    if ($container.length == 0) {
79        return true;
80    } //if we're on mobile the search height needs to be added
81
82    var containerPosTop = $container.offset().top - headerHeight;
83
84    if (scrollPos !== 0 && scrollPos > containerPosTop && (!$inpageNav.hasClass('tb-inpagenav--sticky') || calledFromResize)) {
85        $inpageNav.addClass('tb-inpagenav--sticky').css({
86            'top': headerHeight
87        }); //call custom event
88
89        $container.css('height', $inpageNav.outerHeight(true));
90
91        $inpageNav.trigger('activate-sticky');
92    } else if (scrollPos < containerPosTop && $inpageNav.hasClass('tb-inpagenav--sticky')) {
93        $container.css('min-height', '');
94
95        $xa('.tb-inpagenav').removeClass('tb-inpagenav--sticky').css({
96            'top': 'auto'
97        });
98
99        $container.css('height', 'auto');
100    }
101};
102/**
103 *
104 * Header Shrink behaviour
105 *
106 */
107
108
109var _inPageShrink = function _inPageShrink() {
110    if ($xa('.Inpage-navigation').length == 0) {
111        return;
112    }
113
114    var prevScrollpos = window.pageYOffset;
115    var $inpageNav = $xa('.tb-inpagenav');
116    var positionOfinpageNavTop = $xa('.Inpage-navigation').parent().position().top;
117    var threshold = positionOfinpageNavTop + 200; //define pixels that can be scrolled down without compressing
118
119    $inpageNav.on('activate-sticky', function () {
120        prevScrollpos = window.pageYOffset;
121    });
122    $xa(window).resize(function () {
123        _controlShrink(true);
124    });
125    $xa(window).scroll(function () {
126        _controlShrink();
127    });
128
129    var _controlShrink = function _controlShrink(calledFromResize) {
130        if (typeof calledFromResize === 'undefined') {
131            calledFromResize = false;
132        }
133
134        if (startManualScroll) {
135            return;
136        }
137
138        var currentScrollPos = window.pageYOffset; //check if called from resize, if yes make sure height is fixed
139
140        if (currentScrollPos === prevScrollpos) {
141            // || currentScrollPos < (prevScrollpos +100)
142            return;
143        }
144
145        if (currentScrollPos - prevScrollpos > threshold || prevScrollpos > currentScrollPos) {
146            //check if the user scrolls down, then
147            //compress the navbar
148            if (prevScrollpos < currentScrollPos && currentScrollDirection == "down") {
149                if (currentScrollPos > 70) {
150                    //only if megadrop is not active
151                    if ($xa('.tb-megadrop--active').length === 0) {
152                        if (!$inpageNav.hasClass('tb-inpagenav--compressed')) {
153                            $inpageNav.stop().animate({
154                                paddingTop: 0,
155                                paddingBottom: 0,
156                                opacity: 0
157                            }, 100, function () { });

158                        }
159
160                        $inpageNav.addClass('tb-inpagenav--compressed');
161                    }
162                }
163            } else {
164                if ($inpageNav.hasClass('tb-inpagenav--compressed')) {
165                    //to know to which height we need to animate
166                    //we need to store the auto height quickly, before we start
167                    $inpageNav.css({
168                        'opacity': 1
169                    });
170                    var inpageAutoHeight = $inpageNav.outerHeight();
171                    $inpageNav.stop().animate({
172                        paddingTop: 16,
173                        paddingBottom: 16,
174                        opacity: 1
175                    }, 100, function () {
176                        $inpageNav.removeClass('tb-inpagenav--compressed');
177                    });
178                }
179            }
180
181            prevScrollpos = currentScrollPos;
182        } //if inpage nav is compressed, always update prevScrollpos
183        //so that it immediately injects again after scrolling a pixel up
184
185
186        if ($inpageNav.hasClass('tb-inpagenav--compressed')) {
187            prevScrollpos = currentScrollPos;
188        }
189    };
190};

191
192var _initInPageNav = function _initInPageNav(inpageSelector) {
193    inpageSelector.each(function (index, element) {
194        
195        var _liItem = $xa('<li class="tb-inpagenav--item tb-link"></li>');
196
197        var _aItem = $xa('<a class="tb-body tb-font-500" href="#"></a>');
198
199        _aItem.html($xa(element).html());
200
201        _aItem.on("click", function (event) {
202            startManualScroll = true;
203            event.preventDefault();
204            var topContainersHeight = $xa('header .tb-topmenu-container').innerHeight();
205            topContainersHeight += $xa('header .tb-mainnavbar-wrapper').innerHeight();
206            if($xa('.tb-inpagenav--sticky').length>0){
207            topContainersHeight += $xa('.tb-inpagenav--sticky').outerHeight();
208            }
209            else{
210               topContainersHeight += $xa('.tb-inpagenav').outerHeight();
211                 topContainersHeight += 84; //Padding
212            }
213         
214            if (navigator.userAgent.indexOf("Edge") != -1) {
215                window.scrollTo(0, $xa(element).offset().top - topContainersHeight);
216            }
217            else {
218                var body = $xa("html");
219                body.stop().animate({
220                    scrollTop: ($xa(element).offset().top - topContainersHeight)-16
221                }, 0, 'swing', function () {
222                    if (timeOutInpage) {
223                        clearTimeout(timeOutInpage);
224                    }
225
226                    timeOutInpage = setTimeout(function () {
227                        startManualScroll = false;
228                    }, 500); //To prevent menu hide from user click
229
230                });
231            }
232        });
233
234        _liItem.append(_aItem);
235
236        $xa('.tb-inpagenav--list').append(_liItem);
237    });
238
239    if ($xa('.tb-inpagenav--list li').length == 0) {
240        $xa('.tb-inpagenav-container').hide();
241    }else{
242        $xa('.tb-inpagenav-container').show();
243    }
244
245    _setContainerWidth();
246};
247
248if ($xa(".tb-has-anchor").length > 0) {
249    $xa(document).ready(function () {
250        setTimeout(function () {
251            var _anchorKey = window.location.href.split("#");
252            anchorScrollToPos(_anchorKey[1]);
253        }, 3000)
254    });
255
256    $xa('a[name]').on('click', function (e) {
257        if (this.hash !== '') {
258            e.preventDefault();
259
260            var ustr = $xa(this).attr("href");
261            var _anchorKey = ustr.split("#");
262
263            anchorScrollToPos(_anchorKey[1]);
264        }
265    });
266}
267
268var anchorScrollToPos = function (id) {
269    var _scrollPos;
270    var _selectHeight = 0;
271    var _inpageNavHeight = ($xa('.Inpage-navigation:visible').length > 0) ? $xa('.tb-inpagenav').outerHeight(true) : 0;
272    var _headerHeight = $xa('.tb-header-container').outerHeight();
273
274    $xa('[name=' + id + ']').css('display', 'block');
275
276    if (window.innerWidth <= 768) {
277        _selectHeight = $xa('.tb-search-container').outerHeight();
278    }
279
280    if (id != '' && id != undefined && id != null) {
281        _scrollPos = $xa('[name=' + id + ']').offset().top - (_headerHeight + _inpageNavHeight + _selectHeight);
282
283        $xa('html, body').scrollTop(_scrollPos);
284    }
285};