Tips for highlight the toolbar title when the corresponding section becomes visible on the screen

I am currently working on implementing a v-toolbar for a webpage that contains multiple sections. My goal is to have the toolbar title change dynamically based on which section is visible on the screen. I am struggling to find a solution for this using Vuetify version 1.0.5. Any help or guidance on how to achieve this would be greatly appreciated.

<template> 
  <div>
    <v-toolbar dense fixed class="main-toolbar" scroll-off-screen>
      <v-layout row wrap>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
        </v-flex>
      </v-layout>
    </v-toolbar>
    <div id="section1">
     <Section1></Section1>
    </div>
    <div id="section1">
     <Section2></Section2>
    </div>
    <div id="section1">
     <Section3></Section3>
    </div>
  </div>    
</template>

<script>
import Section1 from 'views/section1.vue';
import Section2 from 'views/section2.vue';
import Section3 from 'views/section3.vue';

export default {
  components: {
    Section1,
    Section2,
    Section3,
  }
};
</script>
javascriptvue.jsvuetify.js

Answer №1

Not entirely certain if this is what you're looking for, but one approach could involve listening for the "scroll" event and, based on the section's position, marking it as active.

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4929b9a80b4c7da8c">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0d0e1e0f121d023b495503">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-app-bar color="primary" xdense fixed class="main-toolbar" scroll-off-screen>
        <v-layout row wrap>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(1)"><a href="javascript:document.getElementById('view1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
          </v-flex>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(2)"><a href="javascript:document.getElementById('view2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
          </v-flex>
          <v-flex xs12 md4 class="sub-main-page">
            <v-toolbar-title :class="titleClass(3)"><a href="javascript:document.getElementById('view3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
          </v-flex>
        </v-layout>
      </v-app-bar>
      <div style="margin-top:80px;">
          <div class="view" id="view1"> View 1</div>
          <div class="view" id="view2"> View 2</div>
          <div class="view" id="view3"> View 3</div>
      </div>
    </v-app>
  </div>

  <style>
    .main-toolbar a {
      text-decoration: none;
      color:white;
    }
    .active a{color: yellow;}
    .view {
      border:2px solid navy;
      margin:5px;
      height:600px;
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbadaebe9be9f5a3">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfa9aabaabb6b9a69fedf1a7">[email protected]</a>/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),

      data() {
        return {
          activeView: 1,
          scrollY: 0,
          viewOffsets: []
        }
      },
      methods: {
         show(id) {
            document.getElementById(id).scrollIntoView();
         },
         onScroll(e) {
           this.scrollY = window.scrollY;
           this.scrollY2 = this.scrollY + window.innerHeight;

           let totalHeight = document.body.clientHeight;
           let id = 1;
           const viewOffset = this.viewOffsets[0];
           for(let i = 0; i < this.viewOffsets.length-1; i++) {
              if (this.scrollY >=  (this.viewOffsets[i] - viewOffset)) {
                id = i + 1;
              }
           }
           if (this.scrollY2 > (totalHeight - viewOffset)) {
             id = this.viewOffsets.length;
           }

           this.activeView = id;
         },
         titleClass(id) {
          return (this.activeView == id) ? 'active' : '';
        }
      },
      computed: {
      },
      mounted() {
        document.addEventListener("scroll", this.onScroll);
        const y1 = document.getElementById('view1').offsetTop
        const y2 = document.getElementById('view2').offsetTop
        const y3 = document.getElementById('view3').offsetTop
        this.viewOffsets = [y1, y2, y3];
      }
    })
  </script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide to start an AngularJs application using TypeScript

I have developed an AngularJS App using TypeScript The main app where I initialize the App: module MainApp { export class App { public static Module : ng.IModule = angular.module("mainApp", []) } } And my controller: module MainApp { exp ...

javascriptangularjstypescripttypescript1.4

Converting a variable with a cloned object from jQuery to vanilla JavaScript

const clonedBoardCode = $('#board_code').contents().clone(false); alert( clonedBoardCode.filter('div').eq(x).children().eq(y).text() );//need to fix this I am looking for a code similar to this $('#board_code_dup > div') ...

javascriptjqueryclone

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

javascripthtmlnode.jspush-notificationvert.x

Create a web component build using vue-cli 3 that includes the vue dependency bundled together

Currently, I am utilizing vue-cli 3 to bundle my vue components into web components with a command that looks like this: package.json "build:wc": "vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'" Eve ...

vue.jswebpackvuejs2web-componentvue-cli-3

Can a contentEditable div be given a set height in React.js?

I have a contentEditable div that I want to limit in size. The user should not be able to continue typing once the capacity is reached, and no new lines should be added beyond the fixed height. For example, if the div's height is 600px and the user tr ...

javascripthtmlcssreactjsvite

Is it possible to extract a string from a file and import the extracted string into another file using require() in NODE.js?

My file structure looks like this: collegesapp ├── node_modules │ ├── express │ ├── connect │ ├── jade │ └── passport ├── routes │ └── routes.js ├── views │ ├── index.jade │ ...

javascriptnode.jsexpresspassport.jscircular-dependency

Incorporating an else statement into a function that handles AJAX calls upon receiving a response

My code is almost perfect, but there's just one issue. Whenever an invalid email is entered, the else statement in the PHP response makes it look like the form was still successful. How can I modify my current code to display the appropriate error mes ...

javascriptphpajax

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

The issue with the transition element not functioning properly in the hamburger menu is being encountered while using Tailwind CSS alongside

I am currently working on creating a responsive navigation bar in nuxt3/vue. <template> <nav class="flex justify-between items-center w-[92%] mx-auto gap-4 border border-2 border-black p-2" > <div> <span cla ...

javascriptvue.jstailwind-css

What is the best way to add all IDs to an array, except for the very first one

Is there a way to push all response IDs into the idList array, excluding the first ID? Currently, the code below pushes all IDs to the list. How can it be modified to exclude the first ID? const getAllId = async () => { let res = await axios({ m ...

javascriptnode.jsarraystypescriptapi

The integration of hapi.js with mysql appears to be experiencing difficulty displaying values on the browser

My attempt to retrieve a list of data from mysql using hapi.js resulted in an error message: Error: method did not return a value, a promise, or throw an error However, I can see the data in my console. [ RowDataPacket { id: 1, code: 'test' ...

javascriptmysqlnode.jshapi.js

Error SCRIPT5009: The term 'fetch' is not defined

Having some issues with my requests using Fetch API! The submit form isn't working in Internet Explorer, showing "SCRIPT5009: 'fetch' is undefined" error! This is an example of how it looks: fetch("url", { method: "P ...

javascriptnode.jsnpminternet-explorerfetch-api

Tips for dynamically updating values when input numbers are modified using JavaScript

Check out this amazing tip calculator on netlify. I successfully built it using html, scss, and javascript without relying on any tutorials. Despite taking longer than expected due to being a beginner, I am proud of the outcome. Now, I need some assistanc ...

javascriptfunctioninputaddeventlisteneronchange

How can I automatically update the content of a specific Div element when the page is loading using the Ajax load() function

This is the HTML code I have: <body onload="fun1()"> <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li> <li><a href="#" id="d_blink" onclick="f ...

javascriptphpjqueryajax

analyze testing data in a tabular format with Jest

I am working with an HTML table that contains the following data: id | name 2 | C 1 | B 3 | A My task is to test the order of items in the table. I am currently able to retrieve the rows using: wrapper.findAll('table tr') However, I am unsu ...

javascriptvue.jsjestjs

Display the data from the database in a label based on the selection made in the combo box

In an attempt to pass values into a label based on the selected option from a combobox, let's say if I choose A, the label should display 1 and if I select B, it should display 2. Here is my code: kota.php: $conn = mysql_connect('localhost&apo ...

javascriptphphtml

Refreshing a Web Page with JavaScript

I'm currently facing an issue with my Rails application that includes JavaScript. The JavaScript works fine when the document is initially loaded, but I need it to reload whenever a new page is visited. Is there a way to achieve this without having to ...

javascriptjquery

Challenges with AJAX in Web Browsing

I'm encountering some strange issues with AJAX functionality not working consistently across different web browsers. Is there a specific requirement or workaround to ensure smooth operation across all browsers? The initial problem I am facing is that ...

javascriptjqueryajaxcross-browser

Insert the variable into the specified div ID

I am looking to implement an incremental div id system to ensure all my ids are unique. This way, I can make use of jQuery effects to customize them individually. Let me know if you need further clarification on my query. div id ="name_$id" Perhaps I sh ...

phpjavascriptjquery

Challenges with implementing singleSelect feature in MUI-X DataGrid

Encountering an issue with the singleSelect type on the community version of x-data-grid. The problem arises when attempting to edit a row, where my singleSelect consists of the following data set. Here is how I have configured my DataGrid setup. Although ...

javascriptreactjsmaterial-ui