Track the live scroll location on mobile Safari for iOS versions 6 and 7

Despite searching on SO and the web, I have not been able to find a satisfactory answer to my problem. I am currently working on optimizing an advertisement on my website so that it remains fixed when the user scrolls down the page. I have experimented with various solutions involving gesturechange and touchmove, but none have provided the desired outcome.

Is there a way to dynamically track the window position while a user is scrolling on Safari in iOS 6 or 7? This includes capturing data during momentum scrolling, even after the user has lifted their finger from the screen.

javascriptioscsssafariscroll

Answer №1

An easy yet slightly tricky method.

To style in your css ==>

#myAd {
position: relative;
}

#myAd.fixed {
position: fixed;
}

Incorporate into your html ==>

<div id="myAd" class="sample fixed">
<!--INSERT YOUR AD HERE-->
</div>

Add some jQuery Magic ==>

<script type="text/javascript">
  $(document).ready(function() {
    if ( $('#myAd').length > 0 ) {
      myAd_top = $('#myAd').position().top;
      $(window).scroll( function(e) {
        if ( window.scrollY > myAd_top ) {
          document.getElementById('myAd').className = 'sample fixed';
        } else {
          document.getElementById('myAd').className = 'sample';
        }
      });
    } 
  });
</script>

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

Switch between displaying the HTML login and register forms by clicking a button

Currently, I am working on a website that requires users to either log in or register if they do not have an account. Below is the code I have developed for the login page: <span href="#" class="button" id="toggle-login">Log in</span> <di ...

javascriptphpjqueryhtmlforms

The absolute positioning is causing the <UL> <LI> elements to malfunction

Hello I have encountered an issue with the bootstrap menu that I am using. The first link is not functioning properly due to the position: absolute; attribute of the <li> element. Any suggestions on how to resolve this would be greatly appreciated. I ...

htmlcsstwitter-bootstrap

The script remains static and does not alter the "href" or "div" content based on the current URL

I am having an issue with my NavMenu on my website. It is a table with images that link to product pages, and I want to change the links and names based on the language of the site. However, the script I wrote for this is not working properly. I have tried ...

javascripthtmlwordpress

I am experiencing difficulties in installing JavaScript libraries

PS D:\React> npm i -g expo-cli npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48555d42004e41446d68c7b6d717268805a6369786964 ...

javascriptreactjsnpm

Chrome and FireFox Encounter Ajax Functionality Issues

This script that I have created works flawlessly on Internet Explorer! However, it encounters a few issues when used on Chrome and Firefox. Specifically, it only functions correctly for the first action performed, but fails to do so for subsequent actions. ...

javascriptajax

What does HKHealthStore.isHealthDataAvailable serve to accomplish?

When setting up the HealthKit framework, Apple suggests following these steps: Activate HealthKit capabilities in Xcode. Determine if HealthKit is accessible on the device by calling the isHealthDataAvailable method. If both enabled and available, create ...

iosobjective-cswifthealthkithkhealthstore

Troubleshooting a CSS Problem with Safari

I am experiencing an issue where a box with a hover overlay does not display correctly on Safari browsers (desktop and mobile). The styles such as width, height, and padding are not applied properly initially. Oddly enough, when I toggle these styles off a ...

cssbrowsersafaricross-browsercss-animations

An error has occurred with TokBox: OT.Session is unable to connect because the session has already been declared as

I encountered a similar issue but I'm struggling to make sense of what's going on. I have created a .Net page that includes all the necessary TokBox methods for subscribing. The process involves launching a new window (video monitor for multiple ...

javascriptnode.jssessionstreamtokbox

Get the file from the web browser

Hey there, greetings from my part of the world. I have some straightforward questions that I'm not sure have simple answers. Currently, I am working on a web application using the JSP/Servlet framework. In this app, users can download a flat text fil ...

javajavascripthtml

Utilizing Sequelize's Where clause with the flexibility of optional parameters

Can you guide me on writing Sequelize queries with optional parameters? Consider the below query example: const result : SomeModel[] = await SomeModel.findAll( {where: { id: givenId, ...

javascriptnode.jstypescriptormsequelize.js

Using UINavigationControllers within another navigation controller is prohibited

During the development of an app in XCode 4, I encountered the following code snippet that worked perfectly: TestClass *tester = [[TestClass alloc]init]; NSMutableArray *nsa = [NSMutableArray array]; [nsa insertObject:tester atIndex:0]; self.navcontrolle ...

iosuinavigationcontroller

Implement a unique combination of texture and color on a cube using three.js

In my three.js project, I aim to design a cube with both texture and color simultaneously. The cubes need to have the ability to change color when selected, hence it is crucial that they possess a base color. I wonder if overlaying a black and white text ...

javascripthtmlthree.jstextures

Invisible ReCaptcha by Google not living up to its invisible name

I am having trouble getting Google's Invisible ReCaptcha to function correctly after submitting a form. Despite setting my site-key for an invisible ReCaptcha, the "old" style ReCaptcha keeps appearing. I am unsure why this is happening and would appr ...

javascriptjqueryrecaptchacaptchainvisible

What is the process for integrating a third-party JavaScript Node.js library into a Cordova plugin?

I'm in the process of creating a Cordova plugin for an internal project and I am considering integrating a third-party open source Javascript library called bluebird promise. My initial thought was to simply copy and paste the bluebird JS files into m ...

javascriptnode.jscordovabluebird

Ways to retrieve the identifier of the uploaded document in GridFs for linking with another model

After creating a GridFS and uploading an image using the code snippet below: app.post("/upload", upload.single("photo"), function(req, res) { res.redirect("/images"); }) I also have a separate model for users: var userSchema = new mongoose.Schema({ ...

javascriptmongodbmongoosegridfs

Guide to Uploading a File and Storing it in a Database with PHP, JavaScript, and Bootstrap

Hello everyone, I am facing a problem with JavaScript. I am trying to create CRUD functionality using Modal (Bootstrap), PHP, and JavaScript. However, I am unable to upload a file and save it to the database until now. I have 3 files (index, form, javascri ...

javascriptphpjquerytwitter-bootstrap

Issue with the intersection of mouse and camera rays in three.js

I've been working on a simple program that involves creating a clickable 3D object in Three.js. I've referenced my code from When I click directly on the object, it works as expected, but upon examining the resulting array, I noticed that the ob ...

javascriptthree.js

Implementing dynamic width UIButtons within a UIView using Swift programming

My goal is to dynamically add UIButtons within a UIView, where the width of the buttons will adjust based on their title. This means there could be one button per row, or up to three buttons in a row. If there isn't enough space in the same row, the b ...

iosswiftuiview

influence the order in which dom elements are loaded when the site is loaded

I am seeking advice on how to control the loading sequence of elements in my website. The issue I am facing involves a curtain effect (a <div> with a background-image) overlaying my site, which triggers an animation function to remove it once the pag ...

jqueryhtmlcss

Utilizing Local Files in a Bootstrap Video Carousel

Currently working on a website for a school project and I am trying to incorporate a carousel of videos. After finding a bootstrap carousel template that played videos linked to a server, I attempted to switch it out with local video files without succes ...

htmlcssbootstrap-4