Adjust the margin-top of the navigation bar with animation upon clicking the button

I have implemented a Cookie bar that is fixed at the top of my website. When the Close icon is clicked, the bar fades away.

Due to the positioning of the div, I am also pushing down my .nav element by 64px.

Inquiry: Is it feasible for the margin-top on my .nav to gradually reduce to 0 when the Close icon is clicked, with a similar animation speed? I am unsure how to achieve this.

Here is the link to my Demo: http://jsfiddle.net/ox19egn4/

Also, what would be the optimal way to permanently set my .nav to margin-top:0px after the user has viewed the Cookie bar notice? Should I simply set it to 0 in my CSS but temporarily set it to 64px in JS?

javascriptjqueryhtmlcss

Answer №1

I would suggest utilizing css for this task. Here is an example:

$('.close').click(function() {
  $('.cookie').fadeOut(300, function(){
    $('.content').addClass('nocookie');  
  });
});
.cookie {
  text-align:center;
  background:red;
  color:#fff;
  position:fixed;
  width:100%;
  left:0;
  top:0;
}

.close {
  font-size:80%;
  color:inherit;
}

.content {
  transform:translateY(20px);
  transition:all .3s ease;
}

.content.nocookie {
  transform:translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cookie">Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie Cookie <a href="#" class="close">close</a></div>
<div class="content">Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>

Answer №2

It seems like you're looking for a solution to your issue. In the function hideContainer, consider adding the following:

$('.nav').animate({
  'margin-top': 0
}, 200);

Alternatively, you could have adjusted the CSS property of .nav directly like so:

top: 64px

and then animate this property within your JavaScript code.

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

How can data be effectively passed between templates in Angular?

I have two templates: in the first template, I am using a function and after its successful execution, I want to retrieve data in the second template. How can I achieve this? Both templates are utilizing the same controller. First Template: <form ng-s ...

javascriptangularjs

Unable to build a React Native library

For the past month, I've been diligently working on a react native component library, and I believe it's finally in a state where I can publish it as a package on npm. After pushing it to GitHub and running npm publish, everything seemed to be ru ...

javascriptandroidreact-nativenpmnpm-publish

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

Successfully executing a JQuery ajax GET request results in receiving truncated data

Recently, I encountered an issue while retrieving a large amount of data from my server using a JQuery ajax GET request. The data returned was truncated unexpectedly (as shown in the image below). However, when I tried accessing the same URL directly throu ...

javascriptjquerynode.jsajaxexpress

Center align the text inside a table cell of a span that is floated to the right and has a varying

Struggling to align a span vertically in the middle with a different font size than its table cell. The goal is to have the following layout: | | | Measurement (font-size: 100%) unit (font- ...

htmlcsscss-float

Issues encountered when using PUT requests in a react.js application

I've encountered an issue with a PUT request where, after editing one field and saving, all other values except the edited one become null. It seems to be related to the onChange() function, but I'm not entirely sure. Below is all the relevant co ...

javascriptnode.jsreactjsrestexpress

Unslider: Ensure images stay centered even on smaller screen resolutions

Utilizing Unslider in a recent project from . Managed to align the slider halfway, but facing an issue with off-center slides on resolutions of 1920px and lower. The image width is 3940px. Attempted to implement the code snippet from this answer like so: ...

javascriptjqueryhtmlcssunslider

Organize the array of objects

Within my React state, I aim to rearrange a set of 3 objects by always placing the selected one in the middle while maintaining ascending order for the others. Currently, I utilize an order property within each object as a way to keep track of the sequenc ...

javascriptreactjs

Syntax highlighting in custom blocks with VueJS

Vue single file components allow for the creation of custom blocks (besides the commonly used script, template, and style). For more information, you can refer to the official documentation here: . However, I am struggling to enable syntax highlighting w ...

javascriptvue.jsvuejs2vue-component

An access violation has caused PHP to crash at memory address 77FCAFF8

My PHP website utilizes Ajax and jQuery, functioning smoothly for a while until suddenly encountering a recurring issue with pages and ajax-retrieved sub-pages displaying the message: PHP has encountered an Access Violation at 77FCAFF8 Rebooting the se ...

phpwindowsjquery

Utilizing the 'new' operator in the creation of Mongoose schema structures

Trying to figure out the discrepancy between the two methods of Schema creation in mongoose. Despite searching through the documentation and using Google, I haven't been able to find any substantial results. As a beginner in mongoose, I'm curious ...

javascriptmongodbmongoose

Is it possible to clear a div using jQuery and then restore its contents?

In my setup, I have a video player within a div where clicking the play button (.video-play-container) fades in the video, and clicking the close button (.close-video) fades it out. The issue arose when the faded-out video continued playing in the backgr ...

javascriptjqueryattr

Sending a list via Ajax in Django

I recently executed an Ajax call successfully: $.ajax({ url:'/quespaper/intermediate_table', type:'GET', processData: false, data:{'url_link':url_link_copy,'updated ...

javascriptjqueryajaxdjangopython-3.x

Copy password input field content in Vue to clipboard

I'm currently working on a Vue app that includes a form input for creating passwords. I've managed to implement a button that shows/hides the password, but I'm struggling with adding a copy to clipboard function. It doesn't seem to be w ...

javascriptvue.js

Exploring the relationships between schemas in Node.js using Mongoose and MongoDB

Hello, I am a beginner in utilizing MongoDB and Node.js and I have a query. Below is my product schema: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const categorySchema = require('./category'); const Produc ...

javascriptnode.jsmongodbmongoose

What may be causing the MuiThemeProvider to override the style of a component?

Within my outer component, I am utilizing MuiThemeProvider: <MuiThemeProvider theme={full_theme_e}> <div> <AppBar /> <Filter /> </div> </MuiThemeProvider> Inside the Filter component, I have specified a ...

cssreactjsmaterial-ui

Expanding a table by including a new column using Node.js and Knex

Currently building a service for my router using Node.js and Knex, but I'm struggling to add a column to an existing table. Any assistance would be greatly appreciated. Even though I am working with PostgreSQL, I believe the solution will be similar r ...

javascriptnode.jspostgresqlbackendknex.js

There are issues with React Grid2 not adhering to specified row and column definitions and lacking

I am currently in the process of creating a website with react, and I have reached the point where I need to showcase some products. To achieve this, I am utilizing React's Grid2 due to its flexibility for customization and responsiveness to different ...

htmlcssreactjsmaterial-ui

"Exploring the Power of Ajax Login in CakePHP 2.4

Feeling lost as I couldn't figure out where the mistake lies in my code. I've scoured Google for tutorials but haven't had any luck finding a solution. Every time I attempt to submit the form, Chrome's network feature shows a redirectio ...

phpjquerycakephpcakephp-2.4

Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the o ...

htmlcssangularjsformstwitter-bootstrap-3