"Enjoying the convenience of a stationary header while browsing on your smartphone

Hey there! I'm currently facing an issue with my website's fixed horizontal nav bar when zooming in on a mobile device. After doing some research, it seems the only solution is to implement some javascript.

I came across a jquery fix (see below) for this problem, but I'm struggling to convert it into an angular directive. Can anyone assist me with this? Thanks!

Here is the jquery code that I'm attempting to transform into an angular directive:

if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
 }
 $(window).scroll(function() {
if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
}
else {
$('#copyright').css({ 'left': '20px' });
$('#click-to-call, #erving').css({ 'right': '20px' });
}
  });
javascriptcssangularjsangularjs-directiveangularjs-scope

Answer №1

Here is an example:

angular.module('myapp')
.directive('fixedBar', function ($window) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      $win = angular.element($window);
      // Assuming these elements are static
      $lefties = element.find('#copyright');
      $righties = element.find('#click-to-call, #erving');

      function updateBar() {
        if ($win.width() < 990) {
          $lefties.css({ 'left': (20 - $win.scrollLeft()) + 'px' });
          $righties.css({ 'right': (20 + $win.scrollLeft()) + 'px'});
        } else {
          $lefties.css({ 'left': '20px' });
          $righties.css({ 'right': '20px' });
        }
      }

      $win.on('scroll', updateBar);

      updateBar();
    }
  }
}

This code snippet would enable you to achieve the following setup:

<nav fixed-bar>
  <div id="copyright"></div>
  <div id="click-to-call"></div>
  <div id="erving"></div>
</nav>

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

Unlocking the treasures of JSON data in JavaScriptDiscovering the secrets of extracting JSON

let info = { "@type": "Movie", "url": "/title/tt0443272/", "name": "Lincoln", "image": "https://m.media-amazon.com/images/M/MV5BMTQzNzczMDUyNV5BMl5BanBnXkFtZTcwNjM2ODEzOA ...

javascriptjson

Purging the internal buffer of the node stream

Utilizing Node Serialport, I've implemented an event listener to check the data streaming through the connection for correct units. If the units don't match what the user has set, I utilize the .pause() method to pause the stream and inform the u ...

javascriptnode.jseventsserial-port

Sending javascript data to php within a modal popup

I am currently working on passing a javascript variable to php within a modal window, all while remaining on the same page (edit.php). Although I plan to tackle handling this across separate pages later on, for now, I have successfully implemented the foll ...

phpjavascriptvariables

Struggling with Implementing jQuery for Triggering Multiple Functions on a Single Change Event?

I am currently developing jQuery functions that create dependencies between the css classes of different inputs in a web form. For example, when a specific input has a certain value, the "hide" class is removed from another input. One working example of t ...

javascriptjquery

Different options for reading large files during an AJAX file upload

It seems that php's file_get_contents is not able to handle large files. What can be done as an alternative if it is causing a "stack overflow" issue? HTML File <form id='test'> <input type='file' name='Receipt&ap ...

javascriptphpajaxfile-get-contents

Having trouble troubleshooting the jQuery button

When I click this button, it triggers an ajax call that updates the score_up value. I can't seem to figure out what's wrong. I attempted using Firebug, but it doesn't detect the JavaScript. Any help would be appreciated! Here is the jQuery ...

javascriptjquery

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

javascriptcssreactjsfrontendmaterial-ui

I have been dynamically inserting div elements into the DOM using JavaScript, using the appendChild method to add them and later removing them with removeChild. Strangely, when trying to append a div

There seems to be an issue in the code snippet below. The function create() works fine the first time, but encounters a problem on the second run at the line boxWrapper.appendChild(box);. It appears that the removeChild method is causing some disruption in ...

javascriptappendchildremovechild

Static size element overlapping side panel

I am trying to center a fixed width element on my page, ensuring that it stays centered if it fits within the page width but extends beyond the page if needed with scroll accessibility. I have almost achieved this, but the element overlaps with the sidebar ...

htmlcss

The v-btn label in Vuetify is extending beyond the lateral borders and overlapping

In this scenario, the button is supposed to break the line and increase its height. However, the text is overlapping the lateral borders (you can see this behavior in the Codepen link provided below). Is there a way to correct this issue? Codepen Link & ...

cssvue.jsvuetify.js

Following the execution of the "ng build --prod" command in Angular 2, the functionality of ui

Utilizing an Angular program with a Node.js server and the ng serve command has been successful. However, when attempting to transfer this code to a shared Linux server and using XAMPP for compilation, an error was encountered: ng build --prod The error ...

javascriptangularangular-ui-router

Guide to conditionally adding a property to an object in JavaScript

After scouring both Stack Overflow and Google for a solution, I finally stumbled upon this brilliant idea: x = { y: (conditionY? 5 : undefined), z: (conditionZ? 5 : undefined), w: (conditionW? 5 : undefined), v: (conditionV? 5 : undefined), u ...

javascriptnode.jsexpress

What is the best way to retrieve scope variables from multiple directives?

I am working on a directive that represents a person with changing location attributes. My goal is to access all the locations together and plot them on a map using the angular-leaflet-directive. I'm struggling to figure out how to access these variab ...

javascriptangularjsangularjs-directive

Running PHP database commands within JavaScript

My issue involves a list that can have one or more tasks attached to it. Here's how the process works: When a user attempts to delete the list, a PHP code checks the 'tasks' table in MySQL to see if any tasks are linked to the list being d ...

javascriptphpajax

Tips for creating a 3D illusion by coding a div or object to rotate around another object or div

I have reached a technical and intellectual roadblock. The issue at hand is this: I need the text to encircle an image and create the illusion that it is moving in front of or behind the image, while keeping the image static. Currently, 1) the rotating te ...

htmlcss3d

Having trouble accessing Kotlin JS from JavaScript

I'm currently experiencing an issue where I am unable to call any Kotlin JS function and receiving an error stating that 'something' is not defined. Initially, I attempted compiling the project with Gradle but found success after following ...

javascriptgradlekotlinnpmwebpack

Having trouble confirming signature with Node.js Crypto library, specifically with key pairs

I have a concise nodejs code snippet where I attempt to sign a string and then verify it using node crypto along with key pairs generated through openssl. Despite trying various methods, the result consistently shows "false" indicating that the signature c ...

javascriptnode.jsopensslcryptojs

Optimizing CSS for Landscape Letter Print Alignment

When attempting to print in letter size and landscape orientation, the two divs fail to align properly. However, when using "@size a4 landscape" for printing, the alignment issue is resolved. What could be missing from my print CSS that would allow them to ...

css

Conditionally defining variables in JavaScript only if they are currently undefined

I have been working on extracting two keywords from a URL in the following format: localhost:3000/"charactername"/"realmname" My goal is to extract "charactername" and "realmname" and assign them to variables. Here is the code snippet I am using: var c ...

javascripthttpurl

Using a vanilla JS object as a prop for a child component

I have created a custom Message class in my application to handle incoming messages, which is defined in message.js. Within message.js, I've implemented two classes: Message and EventEmit. The render function in my Message class requires passing an E ...

javascriptreactjsecmascript-6eventemitter