10 examples of 'change active menu item on page scroll bootstrap' in JavaScript

122
scrollToActiveItemTop() {
123
  if (!this.menus) {
124
    return;
125
  }
126
  this.menus.forEach(menu => {
127
    if (!menu) {
128
      return;
129
    }
130
131
    let activeItem = menu.querySelector(`.${this.addPrefix('item-focus')}`);
132
133
    if (!activeItem) {
134
      activeItem = menu.querySelector(`.${this.addPrefix('item-active')}`);
135
    }
136
137
    if (activeItem) {
138
      const position = getPosition(activeItem, menu);
139
      scrollTop(menu, position.top);
140
    }
141
  });
142
}

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

15
scrollActiveLinkIntoView() {
16
  const activeLink = document.querySelector('.c-sidebar-nav .active-link');
17
  const sidebarList = document.querySelector('.nav-sidebar-link-list');
18
19
  if (!activeLink || !sidebarList) return;
20
21
  const activeLinkRect = activeLink.getBoundingClientRect();
22
23
  sidebarList.scrollLeft += activeLinkRect.x + activeLinkRect.width / 2 - window.innerWidth / 2;
24
}

222
private scrollToSelected(): void {
223
224
    this.navbarItems().elements.forEach(element => {
225
        // Allow time to make sure an item is selected
226
        setTimeout(() => {
227
            let wrapEl: HTMLElement = this.$refs.wrap;
228
            if (element && element.$props.value === this.model && wrapEl) {
229
                let buttonLeftWidth: number = this.$refs.buttonLeft && this.hasArrowLeft ? this.$refs.buttonLeft.clientWidth : 0;
230
                let buttonRightWidth: number = this.$refs.buttonRight && this.hasArrowRight ? this.$refs.buttonRight.clientWidth : 0;
231
                let scrollPositionAlignLeft: number = (element.$el as HTMLElement).offsetLeft - buttonLeftWidth;
232
233
                // Check if selected element is visible in navbar
234
                if (wrapEl && wrapEl.clientWidth > ((element.$el as HTMLElement).offsetLeft - wrapEl.scrollLeft + buttonRightWidth)) {
235
                    // Check if the selected element exceeds on the left side
236
                    if (((element.$el as HTMLElement).offsetLeft - buttonLeftWidth - wrapEl.scrollLeft) < 0) {
237
                        wrapEl.scrollLeft = scrollPositionAlignLeft;
238
                        // Check if the selected element exceeds on the right side
239
                    } else if (wrapEl.clientWidth < ((element.$el as HTMLElement).offsetLeft - wrapEl.scrollLeft + element.$el.clientWidth + buttonRightWidth)) {
240
                        wrapEl.scrollLeft = wrapEl.scrollLeft + element.$el.clientWidth + buttonRightWidth - (wrapEl.scrollLeft + wrapEl.clientWidth - (element.$el as HTMLElement).offsetLeft);
241
                    }
242
                } else if (wrapEl) {
243
                    wrapEl.scrollLeft = scrollPositionAlignLeft;
244
                }
245
246
                if (this.skin === MNavbarSkin.TabUnderline || this.skin === MNavbarSkin.TabArrow) {
247
                    this.setSelectedIndicatorPosition(element, this.skin);
248
                }
249
250
                this.setDisplayNavigationButtons();
251
            }
252
        });
253
    });
254
}

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
}

234
scrollToLastSelected() {
235
  const lastSelectedIndex = this.getLastSelectedIndex()
236
  if (lastSelectedIndex === -1) return
237
  const item = this.itemsRefs[this.itemsKeys[lastSelectedIndex]]
238
  if (!item) return
239
  const menuRect = getBoundingClientRect(this.menu)
240
  const itemRect = getBoundingClientRect(item)
241
  this.menu.scrollTop += itemRect.top - menuRect.top - menuRect.height / 2
242
}

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

93
clickSubMenu(subMenuItem: string) {
94
    this.driver.element('div.p-Widget.p-Menu.p-MenuBar-menu .p-Menu-content').click(`div=${subMenuItem}`);
95
}

102
getCurrentMenuItem(section: HTMLElement | null): HTMLAnchorElement | null {
103
    if (!section) {
104
        return;
105
    }
106
107
    const sectionId = section.getAttribute("id");
108
    return this.menuList.querySelector(
109
        `[${this.options.hrefAttribute}="#${sectionId}"]`
110
    );
111
}

45
handleTabScroll($tabBar) {
46
  this.setState({
47
    leftBtnActive: $tabBar.scrollLeft > 0,
48
    rightBtnActive: $tabBar.scrollLeft < ($tabBar.scrollWidth - $tabBar.offsetWidth)
49
  });
50
}