10 examples of 'fixed menu on scroll jquery' in JavaScript

188
checkScrollArrows() {
189
	const list = this.list.nativeElement;
190
	if (list.scrollTop === 0) {
191
		if (this.canScrollUp) {
192
			list.style.height = `${parseInt(list.style.height, 10) + 16}px`;
193
		}
194
		this.canScrollUp = false;
195
	} else if (list.scrollTop === list.scrollTopMax) {
196
		if (this.canScrollDown) {
197
			list.style.height = `${parseInt(list.style.height, 10) + 16}px`;
198
		}
199
		this.canScrollDown = false;
200
	} else {
201
		if (!this.canScrollUp) {
202
			list.style.height = `${parseInt(list.style.height, 10) - 16}px`;
203
		}
204
		if (!this.canScrollDown) {
205
			list.style.height = `${parseInt(list.style.height, 10) - 16}px`;
206
		}
207
		this.canScrollUp = true;
208
		this.canScrollDown = true;
209
	}
210
}

503
function handleBlockMenuScroll( event ) {
504
	if ( insertBlockMenuContent.scrollHeight - insertBlockMenuContent.scrollTop <= insertBlockMenuContent.clientHeight ) {
505
		insertBlockMenuContent.className = 'insert-block__content is-bottom';
506
	} else {
507
		insertBlockMenuContent.className = 'insert-block__content';
508
	}
509
}

10
function buildMenuScrollDown(menu,offset) {
11
	var newOffset = offset+scrollOffset;
12
	buildMenuScroll(menu,newOffset);
13
}

167
handleScroll() {
168
  this.forceUpdate();
169
}

34
var scrolling = function scrolling() {
35
  var currentScroll = view.scrollTop;
36
  for (var i = headings.length - 1; i >= 0; i--) {
37
    var currentHeader = headings[i];
38
    var headingPosition = currentHeader.offsetTop - view.offsetTop;
39
    var offset = headingPosition - currentScroll;
40
    var currentHeight = currentHeader.offsetHeight;
41
    var differentHeaders = currentlyFixed != currentHeader;
42
    // Effect
43
    if (!notApplyEffect && Math.abs(offset) < currentHeight &&
44
        differentHeaders) {
45
      var toMove = Math.abs(offset) - currentHeight;
46
      var inEffect = toMove <= 0;
47
      var translateTop = 'translateY(' + toMove + 'px)';
48
      var transform = inEffect ? translateTop : null;
49
      fixedContainer.style.transform = transform;
50
    }
51
52
    // Switching Header
53
    if (offset <= 0) {
54
      if (differentHeaders) {
55
        if (!notApplyEffect)
56
          fixedContainer.style.transform = 'translateY(0)';
57
        currentlyFixed = currentHeader;
58
        fixedContainer.textContent = currentHeader.textContent;
59
        if (currentHeader.id == 'group-favorites') {
60
          fixedContainer.innerHTML = currentHeader.innerHTML;
61
        }
62
      }
63
      return;
64
    }
65
  }
66
  currentlyFixed = null;
67
  if (!notApplyEffect)
68
    fixedContainer.style.transform = 'translateY(-100%)';
69
};

280
hookAfterAddingFixedMenuItems(callback: (menu: Menu, menuItems: MenuItem[]) => void, forceThis?: Object) : IEventHandle
281
{
282
    return this._Dispatcher.hook(this._Events.afterAddingFixedMenuItems, callback, forceThis);
283
}

79
function wrapMenuOnMobile() {
80
  const container = document.querySelector('.cm-navigation');
81
  const wrapper = document.createElement('div');
82
  wrapper.id = 'menu-wrapper';
83
  wrapper.classList.add('cm-navigation__menu');
84
  wrapper.classList.add('mobile-navigation-wrapper');
85
  const innerMenu = document.querySelector('.cm-navigation__menu').innerHTML;
86
87
  if (!document.getElementById('menu-wrapper')) {
88
    wrapper.innerHTML = innerMenu;
89
90
    container.appendChild(wrapper);
91
    setTimeout(() => {
92
      document.querySelector(
93
        '#menu-wrapper .cm-menu__list:first-of-type'
94
      ).style.display =
95
        'none';
96
      const links = document.querySelectorAll('#menu-wrapper a');
97
      const linksArray = [];
98
      let linksTpl = '';
99
      const inm = document.querySelector('.mobile-navigation-wrapper input');
100
      const searchButton = document.querySelector(
101
        '.mobile-navigation-wrapper button#search'
102
      );
103
      const cancelButton = document.querySelector(
104
        '.mobile-navigation-wrapper button#cancel'
105
      );
106
      inm.id = 'mobile-searchbox';
107
      searchButton.id = 'search-mobile';
108
      cancelButton.id = 'cancel-mobile';
109
110
      links.forEach(e => {
111
        if (e.getAttribute('data-link')) {
112
          linksArray.push({
113
            link: e.href,
114
            name: e.textContent,
115
          });
116
        }
117
      });
118
119
      linksArray.forEach(e => {
120
        linksTpl += `<li><a href="${e.link}">${e.name}</a></li>`;
121
      });
122
      wrapper.innerHTML += `<ul>${linksTpl}</ul>`;
123
    });
124
  }
125
}

3
function scroll () {
4
  if (window.location.hash === '') return
5
  const anchor = $j('a[href="' + window.location.hash + '"]')
6
  if (anchor) $j(window).scrollTop(anchor.offset().top)
7
}

87
function setScroll (parent, scroll, horizontal) {
88
  if (parent === window) {
89
    if (horizontal === true) {
90
      window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
91
    }
92
    else {
93
      window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, scroll)
94
    }
95
  }
96
  else {
97
    parent[horizontal === true ? 'scrollLeft' : 'scrollTop'] = scroll
98
  }
99
}

8
init() {
9
    if (! $('.main-sidebar .sidebar').length) {
10
        return;
11
    }
12
13
    // 滚动条优化
14
    new PerfectScrollbar('.main-sidebar .sidebar');
15
16
    let $content = $('.main-menu-content'),
17
        $items = $content.find('li'),
18
        $hasSubItems = $content.find('li.has-treeview');
19
20
    $items.find('a').click(function () {
21
        let href = $(this).attr('href');
22
        if (! href || href === '#') {
23
            return;
24
        }
25
26
        $items.find('.nav-link').removeClass('active');
27
        // $hasSubItems.removeClass('menu-open');
28
29
        $(this).addClass('active')
30
    });
31
}