Leveraging em units in jQuery Script

Question

Leveraging em units in jQuery Script

I'm currently in the process of building a website and I'm facing an issue with converting measurements to em's. The script that I have reused from a previous project only seems to work with pixels, despite my efforts to make it compatible with em's.

$(window).scroll(function(){
    $("#nav").css("top",Math.max(0,96-$(this).scrollTop()));
});

To see the current behavior in action, check out this demo:

http://jsfiddle.net/hwRSF/1/

If anyone is able to provide guidance on how to resolve this issue, I would greatly appreciate it!

javascript jquery html css

Answer 1

Answer №1

If you're working with the scrollTop() function, remember that it returns values in pixels. To use these values effectively, you'll need to convert them into em units based on your base font size.

Assuming your base font size is 16, a simple way to convert pixel values to em units is by dividing the pixel value by 16.

Here's a snippet of navigation CSS code using em units:

#nav {
 ...
 top: 6em; /* 96 / 16 = 6*/
 ...
}

Using jQuery, you can dynamically adjust the top position of an element based on the scroll position. Here's an example using the scrollTop() function:

$('#nav').css("top", Math.max(0, (96 - $(this).scrollTop()) / 16) + "em");

For a live example, check out this fiddle: http://jsfiddle.net/hwRSF/3/

Answer 2

If you're working with the scrollTop() function, remember that it returns values in pixels. To use these values effectively, you'll need to convert them into em units based on your base font size.

Assuming your base font size is 16, a simple way to convert pixel values to em units is by dividing the pixel value by 16.

Here's a snippet of navigation CSS code using em units:

#nav {
 ...
 top: 6em; /* 96 / 16 = 6*/
 ...
}

Using jQuery, you can dynamically adjust the top position of an element based on the scroll position. Here's an example using the scrollTop() function:

$('#nav').css("top", Math.max(0, (96 - $(this).scrollTop()) / 16) + "em");

For a live example, check out this fiddle: http://jsfiddle.net/hwRSF/3/

Answer 3

Answer №2

Using 'em' for positioning at the top is perfectly acceptable:

$("#nav").css("top", '3em');

I've had no issues with this approach while using Chrome 28 on my Linux Mint system.

Answer 4

Using 'em' for positioning at the top is perfectly acceptable:

$("#nav").css("top", '3em');

I've had no issues with this approach while using Chrome 28 on my Linux Mint system.

Answer 5

Answer №3

One clever approach is to allow the browser to render 1em and then use javascript to determine its value.

HTML

<div class="hidden dummy-em"></div>

CSS

/* If you don't want the user to see it, use hidden
   You can use any element with a height of 1em
   Avoid using display: none; */

.hidden{
    position: absolute;
    left: 500vw;
}
.dummy-em{
    height: 1em;
}

Javascript(jQuery)

// JavaScript returns values like these in pixels
var oneEm = $('.dummy-em').innerHeight();

Save yourself from doing the calculations and let the browser handle it for you

Answer 6

One clever approach is to allow the browser to render 1em and then use javascript to determine its value.

HTML

<div class="hidden dummy-em"></div>

CSS

/* If you don't want the user to see it, use hidden
   You can use any element with a height of 1em
   Avoid using display: none; */

.hidden{
    position: absolute;
    left: 500vw;
}
.dummy-em{
    height: 1em;
}

Javascript(jQuery)

// JavaScript returns values like these in pixels
var oneEm = $('.dummy-em').innerHeight();

Save yourself from doing the calculations and let the browser handle it for you

Leveraging em units in jQuery Script

Answer №1

Answer №2

Answer №3

Similar questions

Guide on determining the total count based on a specific condition with the help of jQuery

Display a button in a single row table

The method of displaying the date is determined by the starting date

Using Node.js to create a RESTful API that pulls information from MongoDB

Filling form fields with array data (AngularJS)

What is the best way to include a variable or literal as a value in styled components?

Is there a way to attach an event listener to a span that was inserted using DTColumnBuilder?

Unable to retrieve the JSON response item

Ways to transfer a button click event to a callback function

How can I restrict the selection of only one checkbox within an iframe window?

Identifying functions that contain dots in their names using JSHint

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

JavaScript click or text-to-speech

retrieve the responseText in an ajax request

Swiper - tips for managing navigation visibility based on screen size in React

Display or conceal toggle in ruby utilizing jQuery

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

challenges with website design on Internet Explorer 7

Choosing a root element in a hierarchy without affecting the chosen style of a child

JavaScript: The variable `scopes` is declared